HTML में स्ट्रिंग में नई लाइन (\ n) का उपयोग करना और उसे समान करना

87

मेरे पास एक स्ट्रिंग है

string display_txt = "1st line text" +"\n" + "2nd line text";

Jquery में, मैं उपयोग करने की कोशिश कर रहा हूं

('#somediv').html(display_txt).css("color", "green")

स्पष्ट रूप से मैं उम्मीद कर रहा हूं कि मेरा संदेश 2 लाइनों में प्रदर्शित किया जाएगा, लेकिन इसके बजाय संदेश में \ n प्रदर्शित किया जा रहा है। उसके लिए कोई त्वरित सुधार?

धन्यवाद,

— KeenUser
स्रोत

1

काफी स्पष्ट, उत्तर आपके प्रश्न में है, आप html के रूप में div में त्रुटि संदेश को रेंडर करने की कोशिश कर रहे हैं, इसलिए आप <br />टैग का उपयोग कर सकते हैं

— मुर्तजा

दो पंक्तियों की अपेक्षा में "काफी स्पष्ट" कुछ भी नहीं है। इसके विपरीत, यह बिल्कुल स्पष्ट है कि नई लाइन को सादे स्थान के रूप में प्रस्तुत किया जाएगा, केवल यदि आवश्यक हो तो लाइन को लपेटकर। यह HTML कैसे काम करता है, निश्चित रूप से यह भी है कि कैसे .htmlकाम करता है।

2

मुझे सिर्फ उस संदर्भ से मतलब है जहां मैंने अपने स्ट्रिंग को "1 लाइन टेक्स्ट" और "2 लाइन टेक्स्ट" के रूप में संग्रहीत किया है, यह स्पष्ट था कि मैं इन 2 लाइनों में चाहता हूं, न कि html के काम के संबंध में :) धन्यवाद।

— किन्नर

संबंधित: stackoverflow.com/questions/9726970/…

— frederj

78

<br />HTML में नई लाइन के लिए उपयोग करें :

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

— Samich
स्रोत

1

किसी कारण के लिए, मुझे "\ n" के रूप में "\ n" से बचना होगा अन्यथा यह काम नहीं करता है। (Chrome 46 में परीक्षण किया गया)। कोई भी कारण क्यों?

— सुजय फड़के

2

कृपया ध्यान दें कि यह केवल \nस्ट्रिंग के अंदर वर्ण की पहली घटना को प्रतिस्थापित करेगा । MDN दस्तावेज़ीकरण

— डोमिनिक Boulanger

3

सबसे अच्छा .replace(/\n/g, "<br />")अधिक newline को रोकने है।

— KingRider

2

मुझे लगता है कि @vsync का उत्तर स्वीकार किया जाना चाहिए।

— आयुष कुमार

पूरी तरह से काम किया। धन्यवाद।

— जोशसुल्लिवन

172

तालिका सेल में अपना सीएसएस सेट करें

white-space:pre-wrap;

document.body.innerHTML = 'First line\nSecond line\nThird line';

body{ white-space:pre-wrap; }

स्निपेट का विस्तार करें

— vsync
स्रोत

6

तो क्या यह स्वीकृत उत्तर नहीं है? LE: मैं देख रहा हूँ कि यह केवल IE 8+ लिंक

— gciochina

4

यह उत्तर आंतरिक HTML को सेट करने से बेहतर है, क्योंकि यह XSS भेद्यता का कारण नहीं बनता है।

— 21us पर LinusK

4

इसके अलावा, आप white-space:pre-line;व्हॉट्सएप के दृश्यों के रूप में उपयोग कर सकते हैं एक ही व्हाट्सएप में गिर जाएगा। जब आवश्यक हो, और पंक्ति विराम पर पाठ लपेट जाएगा। अधिक जानकारी: https://www.w3schools.com/cssref/pr_text_white-space.asp

— हकूटीज

यह उत्तर पाठ के भीतर \ n को एक नई

— पंक्ति में

2

@ste_irl - तुम्हारा क्या मतलब है? \nसाधन एक नई लाइन मुद्रित किया जाना चाहिए और यह इसे प्रिंट करता है

— vsync

6

आप एक div के बजाय एक पूर्व टैग का उपयोग कर सकते हैं। यह स्वचालित रूप से आपके \ n को सही तरीके से प्रदर्शित करेगा।

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
         var display_txt = "1st line text" +"\n" + "2nd line text";
         $('#somediv').html(display_txt).css("color", "green");
});
</script>
</head>
<body>

<pre>
<p id="somediv"></p>
</pre>

</body>
</html>

— फ्रैंक im वाल्ड
स्रोत

1

शायद .textइसके बजाय .html?

0

मुझे निम्नलिखित समस्या थी जहाँ मैं एक डेटाबेस से डेटा प्राप्त कर रहा था और एक स्ट्रिंग युक्त प्रदर्शित करना चाहता था \n। ऊपर दिए गए किसी भी समाधान ने मेरे लिए काम नहीं किया और मैं आखिरकार एक समाधान के साथ आया: https://stackoverflow.com/a/61484190/7251208

— केविन एच ग्रिफिथ
स्रोत