ฉันจะแทนที่ตัวแบ่งบรรทัดทั้งหมดในสตริงด้วยองค์ประกอบ <br /> ได้อย่างไร

ฉันจะอ่านตัวแบ่งบรรทัดจากค่าด้วย JavaScript และแทนที่ตัวแบ่งบรรทัดทั้งหมดด้วย<br />องค์ประกอบได้อย่างไร

ตัวอย่าง:

ตัวแปรที่ส่งผ่านจาก PHP ดังต่อไปนี้:

  "This is man.

     Man like dog.
     Man like to drink.

     Man is the king."

ฉันต้องการให้ผลลัพธ์ของฉันเป็นแบบนี้หลังจากที่ JavaScript ทำการแปลง:

  "This is man<br /><br />Man like dog.<br />Man like to drink.<br /><br />Man is the king."

สิ่งนี้จะเปลี่ยนผลตอบแทนทั้งหมดเป็น HTML

str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');

ในกรณีที่คุณสงสัยว่าอะไร: หมายถึง มันถูกเรียกว่ากลุ่มที่ไม่ได้ดักจับ หมายความว่ากลุ่มของ regex ภายในวงเล็บจะไม่ถูกบันทึกในหน่วยความจำเพื่อใช้อ้างอิงในภายหลัง คุณสามารถตรวจสอบกระทู้เหล่านี้สำหรับข้อมูลเพิ่มเติม:
https://stackoverflow.com/a/11530881/5042169 https://stackoverflow.com/a/36524555/5042169

หากความกังวลของคุณเป็นเพียงการแสดง linebreaks คุณสามารถทำได้ด้วย CSS

<div style="white-space: pre-line">Some test
with linebreaks</div>

Jsfiddle: https://jsfiddle.net/5bvtL6do/2/

หมายเหตุ : ให้ความสนใจกับการจัดรูปแบบโค้ดและการเยื้องเนื่องจากwhite-space: pre-lineจะแสดงบรรทัดใหม่ทั้งหมด (ยกเว้นบรรทัดใหม่ล่าสุดหลังข้อความดูซอ)

โดยไม่ต้อง regex:

str = str.split("\n").join("<br />");

วิธีนี้ใช้สำหรับอินพุตที่มาจาก textarea

str.replace(new RegExp('\r?\n','g'), '<br />');

หากคำตอบที่ยอมรับไม่เหมาะกับคุณคุณอาจลอง

str.replace(new RegExp('\n','g'), '<br />')

มันใช้งานได้สำหรับฉัน

โดยไม่คำนึงถึงระบบ:

my_multiline_text.replace(/$/mg,'<br>');

สิ่งสำคัญคือการเข้ารหัสข้อความที่เหลือเพื่อป้องกันการโจมตีจากการฉีดสคริปต์ที่เป็นไปได้

function insertTextWithLineBreaks(text, targetElement) {
    var textWithNormalizedLineBreaks = text.replace('\r\n', '\n');
    var textParts = textWithNormalizedLineBreaks.split('\n');

    for (var i = 0; i < textParts.length; i++) {
        targetElement.appendChild(document.createTextNode(textParts[i]));
        if (i < textParts.length - 1) {
            targetElement.appendChild(document.createElement('br'));
        }
    }
}

สิ่งนี้ใช้ได้กับฉันเมื่อค่ามาจากกล่องข้อความ:

string.replace(/\n|\r\n|\r/g, '<br/>');

สำหรับผู้ที่ต้องการอนุญาตสูงสุด 2 <br>ในแถวคุณสามารถใช้สิ่งนี้:

let text = text.replace(/(\r?\n){2,}/g, '<br><br>');
text = text.replace(/(\r?\n)/g, '<br>');

บรรทัดแรก: การค้นหา\nหรือ\r\nที่อย่างน้อย 2 \n\n\n\nของพวกเขาอยู่ในแถวเช่น จากนั้นแทนที่ด้วย 2br

บรรทัดที่สอง: การค้นหาทั้งหมดเดียว\r\nหรือ\nและแทนที่ด้วย<br>

ถ้าคุณส่งตัวแปรจาก PHP คุณสามารถรับมันด้วยสิ่งนี้ก่อนที่จะส่ง:

$string=nl2br($string);

มันจะแทนที่บรรทัดใหม่ทั้งหมดด้วยตัวแบ่ง

str = str.replace(/\n/g, '<br>')

หากคุณต้องการแทนที่บรรทัดใหม่ทั้งหมดด้วยบรรทัดเดียว

str = str.replace(/\n*\n/g, '<br>')

อ่านเพิ่มเติมเกี่ยวกับ Regex: https://dl.icewarp.com/online_help/203030104.htm สิ่งนี้จะช่วยคุณได้ทุกครั้ง

ไม่ตอบคำถามเฉพาะ แต่ผมแน่ใจว่านี้จะช่วยให้ใครบางคน ...

หากคุณมีเอาต์พุตจาก PHP ที่คุณต้องการแสดงผลบนหน้าเว็บโดยใช้ JavaScript (อาจเป็นผลมาจากคำขอ Ajax) และคุณเพียงต้องการรักษาพื้นที่สีขาวและตัวแบ่งบรรทัดให้พิจารณาเพียงใส่ข้อความไว้ใน<pre></pre>บล็อก:

var text_with_line_breaks = retrieve_some_text_from_php();
var element = document.querySelectorAll('#output');
element.innerHTML = '<pre>' + text_with_line_breaks + '</pre>';

ลอง

let s=`This is man.

     Man like dog.
     Man like to drink.

     Man is the king.`;
     
msg.innerHTML = s.replace(/\n/g,"<br />");

<div id="msg"></div>