jQuery का पाठ () और नए अंक

Question

मैं कहना चाहता हूं

$(someElem).text('this\n has\n newlines);

और यह ब्राउज़र में newlines के साथ प्रदान करता है। मुझे जो एकमात्र हल मिला है वह यह है कि css प्रॉपर्टी को 'व्हाइट-स्पेस' सेट करना है। यह लगभग काम करता है, लेकिन फिर मेरे पास टेक्स्ट और someElem के शीर्ष के बीच एक कष्टप्रद बड़ी गद्दी है, तब भी जब मैंने पैडिंग सेट किया था 0. क्या इससे छुटकारा पाने का कोई तरीका है?

Comments

इसे <pre>टैग्स के साथ लपेटना (और .text () के बजाय .html का उपयोग करना) टेक्स्ट फ़ाइल से या मेरी राय में सादे पाठ से लाइन ब्रेक बनाए रखने के लिए सबसे आसान और सबसे अच्छा समाधान है (यह नीचे करीम के उत्तर द्वारा सुझाया गया है)। कैसे: इस के लिए नए विकल्प के white-space: pre-wrap;रूप में प्रयोग करने का सुझाव है क्लोंग के जवाब में

— edwardtyl

के append()बजाय test()और के <br/>बजाय का उपयोग क्यों नहीं \n? इस तरह -$(someElem).append("this <br/> has <br/> newlines");

— इरफान अहमद

Answer 1

यह वर्ष 2015 है। इस बिंदु पर इस प्रश्न का सही उत्तर CSS white-space: pre-lineया का उपयोग करना है white-space: pre-wrap। साफ और सुरुचिपूर्ण। IE का सबसे निचला संस्करण जो जोड़े का समर्थन करता है 8 है।

https://css-tricks.com/almanac/properties/w/whitespace/

PS3 जब तक CSS3 आम हो जाता है, तब आपको संभवतः प्रारंभिक और / या सफेद स्थानों को पीछे हटाने की आवश्यकता होगी।

Comments

इसका उत्तर होना चाहिए।

— एक्सल

यह उत्तर है। अधिक होना चाहिए। 2016 में आपका स्वागत है।

— neoRiley

2017 में यह मिला: अभी भी प्रासंगिक है, और अभी भी सवाल का जवाब है।

— ट्रॉय हैरिस

इस पोस्ट में एक त्रुटि है। वर्ष 2017 है, न कि 2015।

— JDB अभी भी मोनिका

new Date("2016");

— ब्रैंडिटो जूल

Answer 2

यदि आप किसी वैरिएबल में jQuery ऑब्जेक्ट को स्टोर करते हैं तो आप ऐसा कर सकते हैं:

var obj = $("#example").text('this\n has\n newlines');
obj.html(obj.html().replace(/\n/g,'<br/>'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

यदि आप चाहें, तो आप इसे एक साधारण कॉल के साथ करने के लिए एक फंक्शन भी बना सकते हैं, जैसे jQuery.text () करता है:

$.fn.multiline = function(text){
    this.text(text);
    this.html(this.html().replace(/\n/g,'<br/>'));
    return this;
}

// Now you can do this:
$("#example").multiline('this\n has\n newlines');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

Comments

पहली कोड स्निपेट की दूसरी पंक्ति में एक गुम नज़दीकी कोष्ठक है।

— महमूद फ़ैज़

यह वास्तव में OPs प्रश्न का उत्तर देता है

— टॉमी

सबसे अच्छा, एक आकर्षण की तरह काम किया और इस मुद्दे को हल किया।

— ZEESHAN ARSHAD

Answer 3

यहाँ मेरा उपयोग है:

function htmlForTextWithEmbeddedNewlines(text) {
    var htmls = [];
    var lines = text.split(/\n/);
    // The temporary <div/> is to perform HTML entity encoding reliably.
    //
    // document.createElement() is *much* faster than jQuery('<div></div>')
    // http://stackoverflow.com/questions/268490/
    //
    // You don't need jQuery but then you need to struggle with browser
    // differences in innerText/textContent yourself
    var tmpDiv = jQuery(document.createElement('div'));
    for (var i = 0 ; i < lines.length ; i++) {
        htmls.push(tmpDiv.text(lines[i]).html());
    }
    return htmls.join("<br>");
}
jQuery('#div').html(htmlForTextWithEmbeddedNewlines("hello\nworld"));

Comments

वास्तव में, यह मार्क के सुझाव से बेहतर है क्योंकि यह XSS हमले के जोखिम में नहीं है।

— एंड्रयू बी

मुझे लगता है कि आप फंक्शन से बाहर (यानी: document.createElement ('div')) को बना सकते हैं और इसे सभी कॉल के लिए सही उपयोग कर सकते हैं?

— फैबियो ज़द्रोज़नी 19

@FabioZadrozny: हाँ, आप सही कह रहे हैं! मैंने तदनुसार (लगभग) उत्तर संपादित किया है। Div फ़ंक्शन के अंदर लेकिन लूप के बाहर अब बनाया गया है। यह पूरी तरह से कार्य के बाहर हो सकता है, लेकिन फिर यह उपयोग करने के लिए बोझिल हो जाता है।

— पीटर वी। मॉर्क

मेरा मानना ​​है कि @ क्लोंग का जवाब इसके लिए सबसे अच्छा समाधान है

— मिनिलिनिम

यदि आपके टेक्स्ट में स्पष्ट रूप से न्यूलाइन वर्ण हैं, तो हो सकता है कि आप विभाजन का उपयोग करके text.split(/\\n/), या यहां तक ​​कि विभाजन करना चाहें text.split(/\\\\n|\\n|\n/)। JSON प्रारूप में पाठ के आसपास से गुजरते समय मुझे इसका सामना करना पड़ा, जो \nकि स्ट्रिंग में शाब्दिक नियंत्रण वर्णों को एम्बेड करता है ।

— डी। विसेर

Answer 4

वैकल्पिक रूप से, उपयोग करने का प्रयास करें .htmlऔर फिर टैग के साथ लपेटें<pre> :

$(someElem).html('this\n has\n newlines').wrap('<pre />');

Answer 5

आप उपयोग कर सकते हैं htmlके बजाय textऔर से प्रत्येक घटना की जगह \nके साथ <br>। हालाँकि आपको अपने पाठ को सही ढंग से बचाना होगा।

x = x.replace(/&/g, '&')
     .replace(/>/g, '>')
     .replace(/</g, '&lt;')
     .replace(/\n/g, '<br>');

Comments

@ मैथ्यू फ़्लेशेन: धन्यवाद, निश्चित।

— मार्क बायर्स

इस उत्तर को पढ़ने वाले कुछ लोगों को पता नहीं है कि यह कितना खतरनाक है। उपयोगकर्ता-प्रदत्त पाठ के साथ इस समाधान का उपयोग कभी न करें। पीटर मॉर्च का समाधान बेहतर है।

— एंड्रयू बी।

@kulebyashik पीटर के समाधान का उपयोग textकरते हैं, जबकि यह उत्तर htmlसीधे उपयोग करता है।

— जॉन जिओ

Answer 6

मैं someElemसीधे तत्व के साथ काम करने का सुझाव दूंगा, क्योंकि प्रतिस्थापन के साथ .html()स्ट्रिंग के भीतर अन्य HTML टैग्स को भी प्रतिस्थापित किया जाएगा।

यहाँ मेरा कार्य है:

function nl2br(el) {
  var lines = $(el).text().split(/\n/);
  $(el).empty();
  for (var i = 0 ; i < lines.length ; i++) {
    if (i > 0) $(el).append('<br>');
    $(el).append(document.createTextNode(lines[i]));
  }
  return el;
}

इसे कॉल करें:

someElem = nl2br(someElem);

Comments

नोट करने के लिए नोट: यह उत्तर विशेष रूप से उपयोगी है यदि आप फ़ायरफ़ॉक्स ऐड को विकसित करने की योजना बनाते हैं। भीतर का HTML या (.html) अगर jQuery का उपयोग कर रहा है, तो W3C और मोज़िला द्वारा फेक दिया जाता है, और उपरोक्त कोड समीक्षा प्रक्रिया को साफ़ करने में बहुत सहायक है। अधिक जानकारी के लिए सुरक्षा विचार @ developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML

— Delicia Brummitt

Answer 7

इसे इस्तेमाल करे:

$(someElem).html('this<br> has<br> newlines);

Answer 8

CSS वाइट-स्पेस प्रॉपर्टी का उपयोग करना शायद सबसे अच्छा उपाय है। आपके द्वारा देखे जा रहे अतिरिक्त पैडिंग के स्रोत की पहचान करने के लिए फायरबग या क्रोम डेवलपर टूल्स का उपयोग करें।