Hiển thị rn trong html

Để thêm ngắt dòng vào vùng văn bản, hãy sử dụng toán tử cộng (+) và thêm chuỗi \r\n tại nơi bạn muốn thêm ngắt dòng, e. g. 'line one' + '\r\n' + 'line two'. Sự kết hợp của các ký tự \r và \n được sử dụng làm ký tự xuống dòng

Đây là HTML cho các ví dụ trong bài viết này

  
    
  

  
    Your message:
    

    
  

Và đây là mã JavaScript liên quan

Nếu tôi mở trình duyệt của mình, tôi có thể thấy rằng các dấu ngắt dòng đã được thêm vào ở những nơi mà tôi đã sử dụng các ký tự \r\n

Ký tự \r di chuyển con trỏ đến đầu dòng, nhưng không di chuyển nó xuống dòng tiếp theo

Ký tự \n di chuyển con trỏ xuống dòng tiếp theo, nhưng không đưa nó trở lại đầu dòng

Sự kết hợp của các ký tự \r\n

• di chuyển con trỏ đến đầu dòng
• chuyển con trỏ xuống dòng tiếp theo

Bạn sẽ thấy các ngắt dòng được giữ nguyên nếu bạn

const message = document.getElementById('message');

const first = 'line one';
const second = 'line two';
const third = 'line three';

message.value = `${first}\r\n${second}\r\n${third}`;

Bạn cũng có thể sử dụng chữ mẫu để đạt được kết quả tương tự

const message = document.getElementById('message');

const first = 'line one';
const second = 'line two';
const third = 'line three';

message.value = `${first}\r\n${second}\r\n${third}`;

Chúng tôi đã sử dụng chữ mẫu trong ví dụ

Chuỗi được bọc trong backticks, không phải trong dấu nháy đơn

Cú pháp dấu ngoặc nhọn đô la cho phép chúng ta đánh giá một biểu thức trực tiếp trong chuỗi mẫu

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách xóa ngắt dòng khỏi văn bản thông thường bằng cách sử dụng một số mã javascript đơn giản

Nếu bạn đang tìm kiếm các công cụ trực tuyến đã thực hiện việc này thì hãy xem các công cụ này

- Xóa ngắt dòng khỏi văn bản
- Chuyển đổi ngắt dòng văn bản thành ngắt dòng html

Các kiểu ngắt dòng văn bản

Ngắt dòng trong văn bản thường được thể hiện theo ba cách là \r\n hoặc \n hoặc \r. Loại ngắt dòng đầu tiên (\r\n) thường được tạo trên máy tính windows, loại thứ hai (\n) trên Linux và loại ngắt dòng thứ ba (\r) trên máy tính Apple

Để xóa ngắt dòng khỏi văn bản, chúng ta phải xử lý cả ba loại ngắt dòng vì thông thường văn bản của bạn có thể đến từ bất kỳ nguồn nào trong số đó

Mã Javascript để loại bỏ ngắt dòng

Đây là nơi ma thuật javascript xảy ra

//Chúng tôi xác định biến văn bản cần được xóa khỏi ngắt dòng
Var someText = "Đây là một số văn bản. \n Nó có một số ngắt dòng sẽ bị xóa \r bằng Javascript. \r\n";

// Đoạn mã javascript này loại bỏ cả 3 loại ngắt dòng
someText = someText. thay thế(/(\r\n. \N. \r)/gm,"");

Đoạn mã thứ hai với phương thức thay thế javascript loại bỏ cả ba loại ngắt dòng bằng cách sử dụng bit này của biểu thức chính quy. \r\n. \N. \ r. Điều này yêu cầu nó thay thế tất cả phiên bản của \r\n sau đó thay thế tất cả \n hơn là cuối cùng thay thế tất cả \r. Nó đi qua và loại bỏ tất cả các kiểu ngắt dòng khỏi chuỗi văn bản được chỉ định

"gm" ở cuối câu lệnh biểu thức chính quy biểu thị rằng việc thay thế sẽ diễn ra trên nhiều dòng (m) và nó sẽ xảy ra nhiều lần (g)

Chữ "g" trong mã thay thế javascript là viết tắt của "greedy" có nghĩa là việc thay thế sẽ xảy ra nhiều lần nếu có thể. Nếu vì lý do nào đó bạn chỉ muốn thay thế lần xuất hiện đầu tiên được tìm thấy trong chuỗi thì bạn sẽ không sử dụng "g"

Cải thiện mã Javascript để loại bỏ ngắt dòng

Trong nhiều cách sử dụng mã javascript trong thế giới thực, có lẽ tốt hơn là thay thế các ngắt dòng bằng một khoảng trắng thay vì chỉ xóa chúng hoàn toàn

Ví dụ: nếu chúng tôi có một cột văn bản từ pdf và chúng tôi chỉ xóa hoàn toàn ngắt dòng, chúng tôi có thể kết thúc bằng các từ và câu chạy liền nhau và khó đọc như thế này

Đây là một câu. Câu này chạy vào đó và thật không may, chúng tôi đang thiếu một số khoảng trắng

Mà tất nhiên nên đọc như thế này thay vào đó

Đây là một câu. Câu này chạy vào đó và thật không may, chúng tôi đang thiếu một số khoảng trắng

Để làm điều này, chúng tôi sẽ cập nhật ví dụ của mình bằng cách thay thế tất cả các loại ngắt dòng bằng một khoảng trắng như vậy

//JavaScript này thay thế cả 3 kiểu ngắt dòng bằng dấu cách
someText = someText. thay thế(/(\r\n. \N. \r)/gm," ");

Xóa khoảng trắng thừa khỏi dòng

Bây giờ có thể có những chỗ trong văn bản xuất hiện dấu cách dòng đôi khi chúng ta chỉ muốn có một khoảng trắng. Để xóa tất cả các khoảng trắng thừa, chỉ cần sử dụng mã javascript này sau mã xóa ngắt dòng

//Thay thế tất cả các khoảng trắng kép bằng các khoảng trắng đơn
someText = someText. thay thế(/\s+/g," ");

Regex javascript này tìm thấy nhiều khoảng trắng và thay thế chúng bằng một khoảng trắng duy nhất

Xóa ví dụ ngắt dòng

Bạn có thể thấy toàn bộ hoạt động bằng cách xem ví dụ hoạt động đơn giản này. javascript loại bỏ ví dụ ngắt dòng

Đó là về nó cho hướng dẫn này. Một dòng javascript đơn giản để xóa các ngắt dòng và thay thế chúng bằng một khoảng trống và một dòng javascript thứ hai để thay thế nhiều khoảng trắng bằng các khoảng trắng đơn lẻ để mọi thứ trông gọn gàng hơn một chút

Ngắt dòng \n là gì?

Làm cách nào để chuyển đổi \n sang dòng mới trong JavaScript?

Làm cách nào để tạo một dòng trong HTML?