Bài viết này trình bày quy trình từng bước để chuyển văn bản chữ hoa thành chữ hoa tiêu đề.
Làm cách nào để chuyển đổi văn bản chữ hoa thành trường hợp tiêu đề?
Với sự trợ giúp của các thuộc tính CSS và JavaScript, văn bản viết hoa có thể được chuyển đổi thành trường hợp tiêu đề. Chuyển đổi này giúp cải thiện khả năng đọc và hình thức của văn bản. Ngoài ra, nó cung cấp định dạng nhất quán và nâng cao trải nghiệm người dùng.
Thực hiện theo hướng dẫn từng bước bên dưới để chuyển đổi từ chữ hoa sang chữ hoa tiêu đề:
Bước 1: Tạo một phần tử được nhắm mục tiêu
Trong bước đầu tiên này, hãy tạo một phần tử được nhắm mục tiêu/được chọn bên trong “ ” được chuyển đổi thành trường hợp tiêu đề. Ví dụ, “ P ” dữ liệu phần tử được nhắm mục tiêu:
< trung tâm >
< P nhận dạng = 'chuyển đổi' > VĂN BẢN NÀY ĐƯỢC CHUYỂN ĐỔI TỪ CHỮ HOA SANG TIÊU ĐỀ BẰNG CSS < / P >
< trung tâm >
Trong khối mã trên:
- Đầu tiên, sử dụng một “ ” thẻ để hiển thị văn bản ở trung tâm của trang web bên trong “
' nhãn. Ngoài ra, cung cấp dữ liệu giả ở định dạng chữ hoa. - Tiếp theo, thêm một “ nhận dạng ” thuộc tính và cung cấp cho nó một giá trị là “ bộ chuyển đổi ”. Cái này ' nhận dạng ” sẽ được sử dụng để lưu trữ tham chiếu của thẻ
bên trong thẻ JavaScript.
Sau khi kết thúc giai đoạn biên dịch:
Ảnh chụp nhanh ở trên của trang web cho biết văn bản đã được hiển thị thành công.
Bước 2: Chuyển chữ hoa thành chữ thường
Để tạo trình chuyển đổi, các thuộc tính và phương thức JavaScript được sử dụng. Thực hiện theo mã dưới đây, mô tả của nó được nêu dưới đây:
đã từng là mục tiêu = tài liệu.getElementById ( 'chuyển đổi' ) .textContent.toLowerCase ( ) ;
mục tiêu = mục tiêu .thay thế ( / \b\w / g,
chức năng ( thấp hơn ) { trả về thấp hơn.toUpperCase ( ) ; } ) ;
tài liệu.getElementById ( 'chuyển đổi' ) .textContent = mục tiêu ;
< / kịch bản >
Trong đoạn mã trên:
- Đầu tiên, tạo một biến có tên “ mục tiêu ” bên trong “
' nhãn. - Tiếp theo, sử dụng “ văn bảnnội dung ” để chỉ chọn văn bản để lại khoảng trống và các thẻ khác. Các ' toLowerCase() ” hàm có id là “converter” lưu giá trị cho biến “đích”.
- Sau đó, “ thay thế() ” được sử dụng để thay đổi giá trị của biến “mục tiêu”. Nó chọn ký tự đầu tiên của mỗi từ bằng cách sử dụng “ \b\w ” và sau đó sử dụng biểu thức “ Đến trường hợp trên() ' chức năng. Nó thay đổi định dạng văn bản thành chữ hoa.
- Cuối cùng, giá trị mới của biến “mục tiêu” được hiển thị trên màn hình có id là “ bộ chuyển đổi ”.
Sau khi thực thi đoạn mã:
Đầu ra cho thấy văn bản chữ hoa đã được chuyển đổi thành định dạng chữ hoa tiêu đề.
Phần kết luận
Để chuyển đổi chữ hoa thành chữ hoa tiêu đề, hãy sử dụng “ toLowerCase() ” chức năng trên phần tử đã chọn. Sau đó, sử dụng “ thay thế() ” chức năng để chọn ký tự đầu tiên của mỗi từ bằng cách sử dụng “ \b\w ' sự biểu lộ. Cuối cùng, ký tự đã chọn được chuyển đổi thành chữ hoa bằng cách sử dụng “ Đến trường hợp trên() ' chức năng. Bài viết này đã trình bày quy trình chuyển đổi văn bản chữ hoa của các thành phần được chọn thành chữ hoa tiêu đề.