HTML textarea में लाइन ब्रेक कैसे जोड़ें?


156

मैं <textarea>जावास्क्रिप्ट के साथ संपादन कर रहा हूँ । समस्या यह है कि जब मैं इसमें लाइन ब्रेक करता हूं, तो वे प्रदर्शित नहीं होंगे। मैं यह कैसे कर सकता हूँ?

मुझे फंक्शन लिखने का मान मिल रहा है, लेकिन यह लाइन ब्रेक नहीं देगा।


रेगेक्स और <pre></pre>समाधानों के साथ कोडपेन डेमो यहां उजागर: कोडपेन.आईओ
एन

जवाबों:


265

समस्या इस तथ्य से आती है कि लाइन टूट ( \n\r?) HTML <br/>टैग के समान नहीं हैं

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');

अपडेट करें

चूंकि कई टिप्पणियों और मेरे स्वयं के अनुभव ने मुझे दिखाया है कि यह <br> समाधान अपेक्षित रूप से काम नहीं कर रहा है, इसलिए textarea'\ r \ n' का उपयोग करके एक नई पंक्ति को कैसे जोड़ा जाए, इसका एक उदाहरण है ।

function log(text) {
    var txtArea ;

    txtArea = document.getElementById("txtDebug") ;
    txtArea.value +=  text + '\r\n';
}

मैंने इसे संपादित करने का फैसला किया, न कि एक नए प्रश्न के रूप में क्योंकि यह गलत या अपूर्ण होने के लिए बहुत लोकप्रिय उत्तर है।


7
यह मेरे लिए भी काम करता है। JQuery में आप कुछ इस तरह से कर सकते हैं: $ ('# कैप्शन')। html ($ ('# कैप्शन')। टेक्स्ट ()) की जगह (/ \ n \ r? / G, '<br />')) ;
दावग्रेसिया

2
रेखा विराम रेक्सएक्सप टेक्स्ट टेक्सचरर. /(\r\n|\n|\r)/gm com
tutorials/

3
सही रेगेक्स /\r\n?|\n/gकैप्चर के बिना है, कोई मल्टीलाइन नहीं।
aMarCruz

5
संदेह <br>गलत है। आप चाहते हैं कि एक textarea में एक सार्वभौमिक लाइन ब्रेक के लिए\r\n । उदाहरण के लिए, UC ब्राउजर टेक्स्टएयर में <br> और \ n की उपेक्षा करता है। HTML टेक्स्ट क्षेत्र में एक लाइनब्रेक जोड़ें देखें ।
बॉब स्टीन

2
एक textarea के अंदर का उपयोग करना काम नहीं कर रहा है। कम से कम क्रोम में नहीं, जहां मैंने परीक्षण किया। हालांकि \ n का उपयोग करना काम करने लगता है। यदि आप पाठ को शुद्ध html के रूप में सम्मिलित करने का इरादा रखते हैं, तो किसी भी इनपुट तत्व के बाहर।
स्नोरवर्ग

24

यदि आप सामान्य जावा स्क्रिप्ट का उपयोग करते हैं और आपको स्ट्रिंग को पाठ क्षेत्र मान पर असाइन करने की आवश्यकता है

 document.getElementById("textareaid").value='texthere\\\ntexttext'.

आपको बदलने \nया < br >करने की आवश्यकता है\\\n

अन्यथा यह Uncaught SyntaxError: Unexpected token ILLEGALसभी ब्राउज़रों पर देता है।


18

शायद किसी को यह उपयोगी लगता है:

मुझे लाइन ब्रेक की समस्या थी जो कि सर्वर वैरिएबल से जावास्क्रिप्ट वैरिएबल तक पहुंचाई गई थी, और फिर जावास्क्रिप्ट उन्हें textarea (नॉकआउट.जैस वैल्यू बाइंडिंग का उपयोग करके) लिख रहा था।

समाधान नई लाइनों से बच रहा था:

orginal.Replace("\r\n", "\\r\\n")

सर्वर की तरफ, क्योंकि सिर्फ सिंगल एस्केप चार्ज़ जावास्क्रिप्ट के साथ पार्सिंग नहीं कर रहा था।


Windows में मेरे लिए "\\ n" काम करता है और मुझे लगता है कि यह लिनक्स सिस्टम में ठीक काम करेगा।
संहिता


6

यदि आप अपने स्वयं के पृष्ठ के अंदर पाठ प्रदर्शित करना चाहते हैं, तो आप <pre>टैग का उपयोग कर सकते हैं ।

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});
<textarea placeholder="type text here"></textarea>
<pre style="font-family: inherits">
The
new lines will
be respected
      and spaces too
</pre>


3

एक नई लाइन ब्राउज़र के लिए सिर्फ व्हाट्सएप है और इसे किसी सामान्य स्थान ("") से अलग नहीं माना जाएगा। एक नई लाइन पाने के लिए, आपको <BR />तत्वों को सम्मिलित करना होगा ।

समस्या को हल करने का एक और प्रयास: टेक्स्टारिया में पाठ टाइप करें और फिर अदृश्य अक्षरों को कुछ पठनीय में बदलने के लिए एक बटन के पीछे कुछ जावास्क्रिप्ट जोड़ें और परिणाम को डंप करें DIV। जो आपको बताएगा कि आपका ब्राउज़र क्या चाहता है।


3

मेरे पास id के साथ एक textarea है #infoartist फॉलो:

<textarea id="infoartist" ng-show="dForm" style="width: 100%;" placeholder="Tell your contacts and collectors about yourself."></textarea>

जावास्क्रिप्ट कोड में, मैं textarea का मूल्य प्राप्त करूँगा और <br />टैग द्वारा नई लाइन (\ n \ r) से बचने की जगह ले लूंगा , जैसे:

var text = document.getElementById("infoartist").value;
text = text.replace(/\r?\n/g, '<br />');

तो अगर आप jquery (मेरी तरह) का उपयोग कर रहे हैं:

var text = $("#infoartist").val();
text = text.replace(/\r?\n/g, '<br />');

आशा है कि इसने आपकी मदद की। :-)


0

अगर आपको लाइन ब्रेक्स के साथ टेस्‍टरिया का मान भेजने की जरूरत है, तो nl2br का उपयोग करें


0

यहाँ वह चीज है जो मैंने उसी मुसीबत के लिए की थी जो मेरे पास थी।

जब मैं jsp में अगले पृष्ठ पर पाठ पास कर रहा हूँ, तो मैं इसे कुछ पढ़ने की बजाय एक textarea के रूप में पढ़ रहा हूँ

इसलिए आउटपुट जैसा आप चाहते थे वैसा ही आया। और अन्य गुणों के लिए, आप नीचे के रूप में उपयोग कर सकते हैं।

<textarea style="background-color: white; border: none; width:660px;font-family: Arial, Helvetica, sans-serif; font-size:1.0em; resize:none;" name="text" cols="75" rows="15" readonly="readonly" ><s:property value="%{text}"/></textarea>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.