HTML viết hoa chữ cái đầu tiên của mỗi từ

Trong hướng dẫn này, chúng ta sẽ xem xét cách viết hoa chữ cái đầu tiên của một chuỗi trong JavaScript, sau đó tìm hiểu cách chúng ta có thể viết hoa chữ cái đầu tiên của mỗi từ trong một chuỗi

Mục lục

• Viết hoa chữ cái đầu tiên của một chuỗi
• Viết hoa chữ cái đầu tiên của mỗi từ trong một chuỗi

Viết hoa chữ cái đầu tiên của một chuỗi

Để đạt được cách viết hoa chữ cái đầu tiên của một chuỗi đã cho trong JavaScript, chúng tôi sẽ sử dụng ba hàm

• charAt()
• Đến trường hợp trên()
• lát cắt()

charAt()

Hàm charAt() trả về ký tự tại một vị trí nhất định trong một chuỗi

cú pháp

string.charAt(index)

Ví dụ

const str = 'flexiple';
const str2 = str.charAt(0);
console.log(str2);

//Output: f

Đến trường hợp trên()

Hàm toUpperCase() chuyển đổi tất cả các ký tự của chuỗi đầu vào thành chữ hoa

cú pháp

string.toUpperCase()

Ví dụ

const str = 'flexiple';
const str2 = str.toUpperCase();
console.log(str2);

//Output: FLEXIPLE

Trong ví dụ trên, chúng ta thấy rằng việc sử dụng hàm toUpperCase() trên chuỗi đã chuyển đổi tất cả các ký tự của chuỗi đầu vào thành chữ in hoa

Nhưng đây không phải là điều chúng ta mong muốn đạt được. Để viết hoa ký tự đầu tiên của chuỗi, chúng ta có thể sử dụng hàm charAt() để tách ký tự đầu tiên rồi sử dụng hàm toUpperCase() để viết hoa ký tự đó. Bây giờ, chúng ta sẽ lấy các ký tự còn lại của chuỗi bằng hàm slice()

lát cắt

Hàm này cắt một chuỗi đã cho từ vị trí “bắt đầu” được chỉ định cho đến vị trí “kết thúc” được chỉ định

cú pháp

string.slice(start, end)

Ví dụ

const str = 'flexiple';
const str2 = str.slice(1);
console.log(str2);

//Output: lexiple

Bây giờ chúng ta hãy sử dụng cả ba hàm cùng nhau để viết hoa từ đầu tiên của chuỗi đầu vào

const str = 'flexiple';
const str2 = str.charAt(0).toUpperCase() + str.slice(1);
console.log(str2);

//Output: Flexiple

const str = 'abc efg';
const str2 = str.charAt(0).toUpperCase() + str.slice(1);
console.log(str2);

//Output: Abc efg

Như bạn có thể thấy từ các kết quả đầu ra ở trên, chúng tôi đã viết hoa chữ cái đầu tiên của chuỗi đầu vào. Bây giờ nếu chúng ta muốn viết hoa các chữ cái đầu tiên của tất cả các từ trong một chuỗi thì sao?

Viết hoa chữ cái đầu tiên của mỗi từ trong một chuỗi

Để đạt được điều này, chúng tôi tách các từ khỏi chuỗi và lưu trữ chúng trong một mảng, sau đó sử dụng khái niệm trên trên từng phần tử của mảng và nối tất cả các phần tử mảng lại với nhau để lấy lại chuỗi. Chúng ta hãy xem xét điều này bằng một ví dụ

Bạn có thể kiểm soát cách văn bản được viết hoa bằng các thuộc tính CSS. Có rất nhiều 'thủ thuật' sử dụng CSS text-transform để thay đổi cách hiển thị văn bản của bạn

Không có mã html nào cho tất cả chữ hoa hoặc chữ thường, chữ hoa tiêu đề. Tất cả được thực hiện bằng CSS

Cho đến gần đây, tôi chưa từng sử dụng CSS để quản lý cách viết hoa được áp dụng, giúp tôi lưu trữ dữ liệu bằng các ký tự chữ thường. Tôi thấy tốt hơn là sử dụng tất cả các ký tự chữ thường cho dữ liệu vì sau đó tôi có thể chuyển đổi các trường khi cần cho các ứng dụng khác nhau

Ví dụ: tôi có xu hướng sử dụng tiêu đề bài viết của mình làm sên url. Tôi chạy tiêu đề thông qua một biểu thức chính quy để viết thường các ký tự, xóa các ký tự url không hợp lệ và thay thế bất kỳ khoảng trắng nào bằng '-'

Bằng cách sử dụng thuộc tính chuyển đổi văn bản CSS, bạn có thể đặt tiêu đề bằng chữ hoa, chữ hoa và chữ thường. Kết hợp các thuộc tính chuyển đổi văn bản với các bộ chọn giả, bạn có thể thực hiện nhiều tùy chỉnh hơn nữa để làm cho các trang của bạn nổi bật so với đối thủ

Thuộc tính chuyển đổi văn bản CSS

Thuộc tính chuyển đổi văn bản CSS là chìa khóa để quản lý kết xuất chữ hoa và chữ thường của văn bản. Có 5 giá trị khác nhau mà bạn có thể sử dụng

1. chữ thường. biến tất cả các chữ cái trong văn bản đã chọn thành chữ thường
2. chữ hoa. làm cho tất cả các chữ cái trong văn bản được chọn viết hoa hoặc TẤT CẢ CÁC CHỮ HOA
   
3. viết hoa. viết hoa chữ cái đầu tiên của mỗi từ trong văn bản đã chọn
   
4. không có. để nguyên cách viết hoa và cách viết hoa chính xác như khi nhập
   
5. thừa kế. cung cấp cho văn bản trường hợp và viết hoa của cha mẹ của nó
   
6. chiều rộng đầy đủ. Là một từ khóa buộc phải viết một ký tự (chủ yếu là chữ tượng hình và chữ viết Latinh) bên trong một hình vuông, cho phép chúng được căn chỉnh trong các chữ viết Đông Á thông thường
   

chữ thường CSS

Sử dụng giá trị chữ thường buộc văn bản hoặc phông chữ được hiển thị bằng các ký tự chữ thường

p {
 text-transform: lowercase; 
}

ĐÂY LÀ MỘT CÂU LẠI CÓ THỂ LÀM MỀM MẠI BẰNG CÁCH SỬ DỤNG CHỮ HOA

biến đổi. chữ thường

Chữ hoa CSS - Cách viết hoa tất cả các chữ cái trong Word

Sử dụng giá trị chữ hoa buộc văn bản hoặc phông chữ được hiển thị bằng các ký tự chữ hoa

ví dụ này chuyển đổi tất cả chuỗi chữ thường thành chữ hoa

p {
 text-transform: uppercase; 
}

biến đổi. chữ hoa

Làm thế nào để bạn làm cho mỗi từ trong một chuỗi hoặc văn bản bắt đầu bằng chữ in hoa hoặc viết hoa tiêu đề cho văn bản?

Trường hợp tiêu đề là nơi mỗi từ trong một câu hoặc chuỗi bắt đầu bằng một chữ in hoa. Giá trị viết hoa làm cho một chuỗi hiển thị trong trường hợp tiêu đề hoặc ít nhất mỗi từ bắt đầu bằng một chữ in hoa

Nếu một chữ cái trong văn bản được định dạng là chữ hoa, nó sẽ không viết thường chữ cái để tạo thành chữ hoa tiêu đề phù hợp

VĂN BẢN NGUỒN NÀY LÀ TẤT CẢ CÁC NƠI CÓ CHỮ THƯỜNG VÀ CHỮ HOA. nhưng Mỗi từ đều bắt đầu bằng một CHỮ HOA

ví dụ này là một ví dụ trường hợp tiêu đề thích hợp hơn

p {
 text-transform: capitalize; 
}

biến đổi. viết hoa

Chú ý đoạn đầu tiên, với sự kết hợp ngẫu nhiên của các ký tự viết hoa và viết thường, không viết thường tất cả các ký tự?

Ngay bây giờ không có sẵn giá trị chữ cái. Thay vào đó, bạn nên cẩn thận viết thường nguồn trước khi kết xuất

Sử dụng Bộ chọn Giả để Áp dụng chuyển đổi văn bản cho Chữ cái Đầu tiên

Một tính năng tương đối hiện đại có sẵn cho bộ chọn CSS là khái niệm về bộ chọn giả. Bạn có thể dùng. bộ chọn chữ cái đầu tiên để áp dụng một kiểu khác cho ký tự đầu tiên của chuỗi

Điều này cho phép bạn áp dụng một số kiểu dáng 'lạ mắt' nếu bạn muốn. Hãy nghĩ về nó như một cách để tạo ra bức thư pháp ảnh hưởng đến chữ cái đầu tiên của một chương lớn và mang tính trang trí

Trong ví dụ này, chuyển đổi văn bản chữ thường được áp dụng cho câu. Sau đó. bộ chọn chữ cái đầu tiên được sử dụng để áp dụng kiểu dáng tùy chỉnh cho chữ cái đầu tiên của đoạn văn. Cụ thể, chữ cái đầu tiên là chữ hoa, lớn hơn và được áp dụng một họ phông chữ khác

p {
 text-transform: lowercase;
 line-height: 3; 
} 

p::first-letter {
 text-transform: uppercase;
 font-size: 3em;
 font-weight: bold;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; letter-spacing: 5px; 
}

VĂN BẢN NGUỒN NÀY LÀ TẤT CẢ CÁC NƠI CÓ CHỮ THƯỜNG VÀ CHỮ HOA. but the first word Bắt đầu với một LỚN CHỮ VỐN. Đây là câu thứ hai

bộ chọn chữ cái đầu tiên

Tóm lược

Như bạn có thể thấy, bạn có thể kiểm soát cách hiển thị văn bản bằng thuộc tính text-transform. Biết rằng bạn có thể kiểm soát cách văn bản của mình được viết hoa có nghĩa là bạn có thể lưu trữ văn bản dưới dạng chữ thường

Một ưu điểm khác mà thuộc tính chuyển đổi văn bản CSS cho phép là loại bỏ JavaScript để chuyển đổi các ký tự. CSS sẽ là một công việc hiệu quả hơn nhiều khi viết hoa các ký tự trong trình duyệt