Sao chép từ văn bản sang div, bảo quản ngắt dòng

Question

Tôi có một số <textarea> và <div> (với một số <p> bên trong). Khi nhập văn bản vào khu vực, các <p> được cập nhật với nội dung khi keyUp.

Có cách nào để bảo toàn các ngắt dòng (dòng mới) khỏi vùng văn bản và bằng cách nào đó khiến chúng hoạt động giống như các dấu ngắt dòng trong div/p không?

Thay thế đôi "dòng mới" bằng </p><p>, điều đó có khả thi không? Điều này là gần với những gì một wysiwyg sẽ xử lý, nhưng không muốn điều đó cho điều này, đó là một dự án rất nhỏ.

---

Đây là những gì tôi đã có cho đến nay.

$(".box textarea").keyup(function() { 
    var value = $(this).val(); 
    $('.box p').text(value); 
}); 

Answer 1

Bạn chỉ có thể làm điều này:

$('.box textarea').keyup(function() { 
    var value = $(this).val().replace(/\n/g, '<br/>'); 
    $(".box p").html(value); 
}); 

này sẽ thay thế tất cả các ngắt dòng \n trong phần tử textarea bạn và thay thế tất cả chúng với html <br/> thẻ, vì vậy mà bạn có thể duy trì các ngắt dòng trong văn bản của bạn trong phần tử thẻ <p> cũng vậy.

Simple Demo đây:

$('.box textarea').keyup(function() { 
 
    $(".box p").html(this.value.replace(/\n/g, '<br/>')); 
 
});

textarea,p { 
 
    width: 90%; 
 
    height: 80px; 
 
} 
 
p { 
 
    border: 1px solid #eee; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <textarea></textarea> 
 
    <br/> 
 
    <p></p> 
 
</div>

Nếu bạn có thể thay đổi các file css của bạn, sau đó bạn cũng có thể thử các giải pháp dưới đây theo đề nghị của @Explosion Thuốc. Mặc dù bạn sẽ phải vẫn sử dụng mã jquery vào đây để thêm văn bản vào textarea-p thẻ trên keyup sự kiện như:

$('.box textarea').keyup(function() { 
 
    $(".box p").html(this.value); // replace is not needed here 
 
});

textarea,p { 
 
    width: 90%; 
 
    height: 80px; 
 
} 
 
p { 
 
    border: 1px solid #eee; 
 
    padding: 5px; 
 
    white-space: pre; // <--- This is the important part 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <textarea></textarea> 
 
    <br/> 
 
    <p></p> 
 
</div>

Answer 2

Bạn có thể muốn thêm các quy tắc CSS white-space: pre hoặc white-space: pre-wrap đến .box p. Điều này sẽ hiển thị khoảng trắng dưới dạng.

Answer 3

Sử dụng string.replace("\n", "<br/>") để thay thế bất kỳ ngắt dòng nào trong vùng văn bản của bạn thành một dòng mới trong trang của bạn.

JavaScript:

<script type="text/javascript"> 
function ta() 
{ 
taValue = document.getElementById("ta").value; 
taValue = taValue.replace("\n", "<br/>"); 
document.getElementById("tatext").innerHTML = taValue; 
} 
</script> 

HTML:

<textarea id="ta" onkeyup="ta()"></textarea> 
<div id="tatext"></div> 

Answer 4

Đây là giải pháp jQuery tinh khiết đơn giản nhất và an toàn nhất:

$(".box textarea").keyup(function() { 
    var value = $(this).val(); 
    $('.box p').text(value).css('white-space', 'pre-wrap'); 
}); 

Tất nhiên, nếu bạn có thể thêm .box p { white-space: pre-wrap } để CSS tĩnh của bạn phong cách, sau đó bạn không cần phải tiêm nó với jQuery.

(Cũng lưu ý rằng white-space: pre-wrap cũng khiến nhiều không gian liên tiếp được giữ nguyên và không bị thu gọn thành một dấu cách.Nếu bạn không muốn điều đó, nhưng vẫn muốn duy trì ngắt dòng, hãy sử dụng white-space: pre-line để thay thế.)

---

Ps. Bạn nên nhập không bao gồm (ví dụ như câu trả lời hiện đang chấp nhận), vì làm như vậy sẽ gây ra đầu ra bị xén nếu đầu vào chứa bất kỳ siêu ký tự HTML nào như & hoặc < và cũng có thể mở bạn thành HTML injection và cross Tấn công kịch bản lệnh (XSS) nếu đầu vào có thể bị ảnh hưởng bởi kẻ tấn công độc hại.

Nếu bạn hoàn toàn khăng khăng không sử dụng thuộc tính CSS white-space dưới bất kỳ hình thức nào, trước tiên bạn cần phải thoát khỏi bất kỳ siêu ký tự HTML nào trước khi thêm <br> thẻ vào đó. Có lẽ cách đơn giản nhất và an toàn nhất để làm điều đó là để trình duyệt xử lý việc thoát cho bạn, ví dụ: như thế này:

$(".box textarea").keyup(function() { 
    var value = $(this).val(); 
    $('.box div.output').text(value).html(function (index, html) { 
    return '<p>' + html.replace(/[^\S\n]+\n/g, '\n').replace(/\n\n+/g, '</p><p>').replace(/\n/g, '<br>') + '</p>'; 
    }); 
}); 

này sẽ đầu tiên sao chép văn bản đầu vào thành các yếu tố mục tiêu sử dụng .text() (tự động HTML-thoát nó) và sau đó sẽ thay đổi kết quả HTML để loại bỏ dấu khoảng trắng từ đường nét, sụp đổ nhiều các dòng lệnh liên tiếp thành các ngắt đoạn và cuối cùng là thay thế các dòng đơn lẻ bằng các thẻ <br>.

(Lưu ý rằng, để cho phép nhiều đoạn văn bản trong đầu ra, phần tử đích thực sự là <div>, không phải là một phần tử <p> trong phần tử khác không phải là HTML hợp lệ và có thể không tạo ra kết quả phù hợp các trình duyệt khác nhau.)