jQuery कन्वर्ट लाइन ब्रेक टू br (nl2br समतुल्य)

Question

मैं jQuery कुछ textarea सामग्री ले रहा हूँ और एक ली में डाल रहा हूँ।

मैं चाहता हूं कि यह लाइन ब्रेक को नेत्रहीन बनाए रखे।

ऐसा करने का एक बहुत ही सरल तरीका होना चाहिए ...

Comments

XSS नोट: यदि आप ऐसा कर रहे हैं तो ऐसा लगता है कि आप सीधे उपयोगकर्ता इनपुट और <br/> का मिश्रण कर रहे हैं, जिसका अर्थ है कि आप या तो newlines प्रदर्शित कर रहे हैं या <br/s>, और इस प्रकार XSS हमले के लिए खुला हो सकता है , यदि आपका इनपुट साइट पर किसी अन्य उपयोगकर्ता से आ रहा है।

— user420667

Answer 1

डेमो: 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

Comments

धन्यवाद, यह पूरी तरह से काम करता है। अजीब यह jQuery का एक आधिकारिक कार्य नहीं है।

— gbhall

कारण jQuery के मूल जावास्क्रिप्ट फ़ंक्शन को प्रतिस्थापित करने के लिए प्रतिस्थापित करने के लिए नहीं है, यह सीएसएस चयनकर्ता चिनिंग और आसान पहुंच पर केंद्रित है! शायद भविष्य के संस्करण में ;-)

— लुका फिलोसोफी

बहुत बढ़िया। मुझे आईई 7 के साथ समस्या को हल करने में मदद मिली कि सफेद-अंतरिक्ष का समर्थन नहीं करना चाहिए: प्री-रैप

— केविन पॉली

अगर वह रेखा ">" के साथ समाप्त होती है तो इसका मतलब यह नहीं होगा कि यह BR को नहीं जोड़ेगा? मुझे पता है कि मैं अपने HTML में & gt; लेकिन उपयोगकर्ता द्वारा तैयार की गई सामग्री इतनी अच्छी तरह से काम नहीं करती है ...

— डेव स्टीन

@DaveStein नहीं, मैंने '>' और '& gt;' और दोनों बार लाइन ब्रेक जोड़ दिए जाते हैं। मुझे लगता है कि यह फ़ंक्शन कोड मूल रूप से सही है :)

— जेक

Answer 2

आप बस कर सकते हैं:

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

Comments

चीयर्स, इस तरह का काम करता है, सिवाय इसके कि यह सिंगल लाइन ब्रेक के रूप में कई लाइन ब्रेक का इलाज करेगा।

— gbhall

मैंने इसे अपडेट किया है और अब यह एक regexp का उपयोग करता है, इसलिए यदि आप एक ही

— ब्र चेंज के

धन्यवाद। उम्मीद है कि कोई आपके उत्तर को उपयोगी समझेगा, लेकिन नीचे दिया गया कार्य भी काम करता है। मुझे यह बुरा लगता है कि आप अधिक प्रयास कर रहे हैं, लेकिन एक फ़ंक्शन अधिक वांछनीय है।

— gbhall

यदि आपको त्रुटि मिलती है "x.replace कोई फ़ंक्शन नहीं है" तो x.toString () का उपयोग करें। बदलें

— Vörös Amadea

Answer 3

इसे अपने कोड में रखें (अधिमानतः सामान्य js फ़ंक्शन लाइब्रेरी में):

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

उपयोग:

var myString = "test\ntest2";

myString.nl2br();

एक स्ट्रिंग प्रोटोटाइप फ़ंक्शन बनाने से आप इसे किसी भी स्ट्रिंग पर उपयोग कर सकते हैं।

Answer 4

सामग्री को बदलने के बजाय रेंडरिंग बदलने की भावना में , निम्नलिखित सीएसएस प्रत्येक नई पंक्ति का व्यवहार करता है :<br>

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

दो नियम क्यों: pre-lineकेवल नई सूचियों को प्रभावित करते हैं (सुराग के लिए धन्यवाद, @ क्वीनपौली)। IE6-7 और अन्य पुराने ब्राउज़र अधिक चरम पर वापस आते हैं preजिसमें nowrapकई रिक्त स्थान भी शामिल हैं और प्रदान करते हैं। इन और अन्य सेटिंग्स ( pre-wrap) पर मोज़िला और सीएसएस-ट्रिक (विवरण @Sablefoste) पर विवरण।

जबकि मैं आम तौर पर इसका उत्तर देने के बजाय प्रश्न का अनुमान लगाने के लिए एसओ पूर्वनिर्धारण का विरोध करता हूं , इस मामले में <br>मार्कअप के साथ नए सिरे से प्रतिस्थापित करने से अनजाने उपयोगकर्ता इनपुट के साथ इंजेक्शन हमले के लिए भेद्यता बढ़ सकती है । जब भी आप स्वयं को .text()कॉलिंग बदलते हुए देखते हैं कि आप एक चमकदार लाल रेखा को पार कर रहे हैं .html(), तो शाब्दिक प्रश्न का अर्थ है। (इस बिंदु को उजागर करने के लिए @AlexS धन्यवाद।) भले ही आप समय पर सुरक्षा जोखिम से इनकार करते हैं, लेकिन भविष्य में होने वाले बदलाव इसे शुरू नहीं कर सकते। इसके बजाय, यह CSS आपको सुरक्षित का उपयोग करके मार्कअप के बिना हार्ड लाइन ब्रेक प्राप्त करने की अनुमति देता है .text()।

Comments

मामले के आधार पर, यह सबसे सरल समाधान है, और वास्तव में इस सवाल का सबसे अच्छा जवाब देता है। आप अन्य white-space:विकल्पों में से किसी पर भी विचार कर सकते हैं, जैसे कि pre-wrap। देखें css-tricks.com/almanac/properties/w/whitespace

— Sablefoste

यह वास्तव में सबसे अच्छा जवाब है - स्ट्रिंग प्रतिस्थापन समाधान का मतलब होगा कि .html()सामग्री को सेट करने के लिए उपयोग करने की आवश्यकता है, जो बदले में उपयोगकर्ता को मनमाने ढंग से HTML सम्मिलित करने की अनुमति देगा जब तक कि आप पहले से फ़िल्टर न करें।

— एलेक्स एस

.html()खतरे के बारे में अच्छी बात @AlexS, को शामिल करने की कोशिश की।

— बॉब स्टीन

Answer 5

उपाय

इस कोड का उपयोग करें

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

Answer 6

यह जावास्क्रिप्ट फ़ंक्शन समझता है कि स्वैप को संभालने के लिए सम्मिलित करें या प्रतिस्थापित करें।

(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

जावास्क्रिप्ट nl2br और br2nl फ़ंक्शन

Answer 7

मैंने इसके लिए थोड़ा 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);
};

Answer 8

@Luca फिलोसोफी के स्वीकृत उत्तर को सुधारने के लिए,

जरूरत पड़ने पर, इस रेगेक्स के शुरुआती क्लॉज को बदलने के लिए उन /([^>[\s]?\r\n]?)मामलों को भी शामिल किया जाएगा, जहां एक टैग और कुछ व्हाट्सएप के बाद नई लाइन आती है, बजाय इसके कि तत्काल एक टैगलाइन के बाद एक टैगलाइन

Answer 9

DOM को लाइन ब्रेक रखते हुए textarea से टेक्स्ट डालने का एक और तरीका है नोड और उसके वंशजों के रेंडर किए गए टेक्स्ट कंटेंट को दर्शाने वाली Node.innerText प्रॉपर्टी का इस्तेमाल करना ।

एक गेटर के रूप में, यह पाठ को यह अनुमान लगाता है कि उपयोगकर्ता को कर्सर के साथ तत्व की सामग्री पर प्रकाश डाला जाएगा और फिर क्लिपबोर्ड पर कॉपी किया जाएगा।

संपत्ति 2016 में मानक बन गई और आधुनिक ब्राउज़रों द्वारा अच्छी तरह से समर्थित है। क्या मैं उपयोग कर सकता हूं : 97% वैश्विक कवरेज जब मैंने यह उत्तर पोस्ट किया।