jQuery แปลงตัวแบ่งบรรทัดเป็น br (เทียบเท่า nl2br)

ฉันมี jQuery ใช้เนื้อหา textarea และแทรกลงใน li

ฉันต้องการให้มันรักษาเส้นแบ่งไว้ด้วยสายตา

ต้องมีวิธีง่ายๆจริงๆ ...

การสาธิต: http://so.devilmaycode.it/jquery-convert-line-breaks-to-br-nl2br-equivalent

function nl2br (str, is_xhtml) {   
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';    
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}

• http://phpjs.org/functions/nl2br:480

คุณสามารถทำได้:

textAreaContent=textAreaContent.replace(/\n/g,"<br>");

ใส่สิ่งนี้ลงในโค้ดของคุณ (ควรอยู่ในไลบรารีฟังก์ชัน js ทั่วไป):

String.prototype.nl2br = function()
{
    return this.replace(/\n/g, "<br />");
}

การใช้งาน:

var myString = "test\ntest2";

myString.nl2br();

การสร้างฟังก์ชันต้นแบบสตริงช่วยให้คุณใช้สิ่งนี้กับสตริงใดก็ได้

ด้วยจิตวิญญาณของการเปลี่ยนการแสดงผลแทนที่จะเปลี่ยนเนื้อหา CSS ต่อไปนี้จะทำให้บรรทัดใหม่แต่ละบรรทัดมีพฤติกรรมเหมือน<br> :

white-space: pre;
white-space: pre-line;

ทำไมต้องมีกฎ 2 ข้อ: pre-lineมีผลกับการขึ้นบรรทัดใหม่เท่านั้น (ขอบคุณสำหรับเบาะแส @KevinPauli) IE6-7 และเบราว์เซอร์เก่าอื่น ๆ ถอยกลับไปสู่จุดสูงสุดpreซึ่งรวมถึงnowrapและแสดงช่องว่างหลายช่อง รายละเอียดเกี่ยวกับการตั้งค่าเหล่านี้และอื่น ๆ ( pre-wrap) ที่mozillaและcss-tricks (ขอบคุณ @Sablefoste)

ในขณะที่โดยทั่วไปฉันไม่ชอบ SO predilection สำหรับการคาดเดาคำถามเป็นครั้งที่สองแทนที่จะตอบคำถามในกรณีนี้การแทนที่บรรทัดใหม่ด้วย<br>มาร์กอัปอาจเพิ่มช่องโหว่ในการโจมตีด้วยการฉีดยาด้วยการป้อนข้อมูลของผู้ใช้ที่ไม่เคยซัก คุณกำลังข้ามเส้นสีแดงสดเมื่อใดก็ตามที่คุณพบว่าตัวเองกำลังเปลี่ยน.text()สาย.html()ซึ่งคำถามตามตัวอักษรจะต้องทำ (ขอบคุณ @AlexS สำหรับการเน้นประเด็นนี้) แม้ว่าคุณจะตัดความเสี่ยงด้านความปลอดภัยในขณะนั้นการเปลี่ยนแปลงในอนาคตอาจทำให้เกิดขึ้นโดยไม่เจตนา แต่ CSS .text()นี้จะช่วยให้คุณได้รับการขึ้นบรรทัดใหม่โดยไม่ยากมาร์กอัปใช้ที่ปลอดภัย

สารละลาย

ใช้รหัสนี้

jQuery.nl2br = function(varTest){
  return varTest.replace(/(\r\n|\n\r|\r|\n)/g, "<br>");
};

ฟังก์ชัน JavaScript นี้พิจารณาว่าจะใช้การแทรกหรือแทนที่เพื่อจัดการการแลกเปลี่ยน

(แทรกหรือแทนที่ตัวแบ่งบรรทัด HTML)

/**
 * This function is same as PHP's nl2br() with default parameters.
 *
 * @param {string} str Input text
 * @param {boolean} replaceMode Use replace instead of insert
 * @param {boolean} isXhtml Use XHTML 
 * @return {string} Filtered text
 */
function nl2br (str, replaceMode, isXhtml) {

  var breakTag = (isXhtml) ? '<br />' : '<br>';
  var replaceStr = (replaceMode) ? '$1'+ breakTag : '$1'+ breakTag +'$2';
  return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, replaceStr);
}

สาธิต - JSFiddle

ฟังก์ชัน JavaScript nl2br & br2nl

ฉันเขียนส่วนขยาย jQuery เล็กน้อยสำหรับสิ่งนี้:

$.fn.nl2brText = function (sText) {
    var bReturnValue = 'undefined' == typeof sText;
    if(bReturnValue) {
        sText = $('<pre>').html(this.html().replace(/<br[^>]*>/i, '\n')).text();
    }
    var aElms = [];
    sText.split(/\r\n|\r|\n/).forEach(function(sSubstring) {
        if(aElms.length) {
            aElms.push(document.createElement('br'));
        }
        aElms.push(document.createTextNode(sSubstring));
    });
    var $aElms = $(aElms);
    if(bReturnValue) {
        return $aElms;
    }
    return this.empty().append($aElms);
};

เพื่อปรับปรุงคำตอบที่ยอมรับของ @Luca Filosofi

หากจำเป็นการเปลี่ยนประโยคเริ่มต้นของ regex นี้จะเป็นการ/([^>[\s]?\r\n]?)รวมกรณีที่บรรทัดใหม่มาหลังแท็กและช่องว่างบางส่วนแทนที่จะเป็นเพียงแท็กตามด้วยขึ้นบรรทัดใหม่ทันที

อีกวิธีหนึ่งในการแทรกข้อความจาก textarea ใน DOM ทำให้การแบ่งบรรทัดคือการใช้คุณสมบัติNode.innerTextที่แสดงถึงเนื้อหาข้อความที่แสดงผลของโหนดและลูกหลาน

ในฐานะผู้เริ่มต้นมันจะประมาณข้อความที่ผู้ใช้จะได้รับหากพวกเขาไฮไลต์เนื้อหาขององค์ประกอบด้วยเคอร์เซอร์แล้วคัดลอกไปยังคลิปบอร์ด

สถานที่ให้บริการนี้กลายเป็นมาตรฐานในปี 2559 และได้รับการสนับสนุนอย่างดีจากเบราว์เซอร์สมัยใหม่ ฉันสามารถใช้ได้ไหม: ความครอบคลุมทั่วโลก 97% เมื่อฉันโพสต์คำตอบนี้