HTML में एक स्ट्रिंग रेंडर करें और रिक्त स्थान और लाइनब्रेक संरक्षित करें

Question

मेरे पास एक MVC3 ऐप है जिसमें विवरण पृष्ठ है। उस हिस्से के रूप में मेरे पास एक विवरण (एक db से प्राप्त) है जिसमें रिक्त स्थान और नई लाइनें हैं। जब यह नई लाइनों को प्रस्तुत किया जाता है और html द्वारा अनदेखा किया जाता है। मैं उन स्थानों और नई लाइनों को सांकेतिक शब्दों में बदलना चाहूंगा ताकि उन्हें अनदेखा न किया जाए।

आप उसे कैसे करते हैं?

मैंने HTML.Encode की कोशिश की, लेकिन यह एन्कोडिंग को प्रदर्शित करने के लिए समाप्त हो गया (और रिक्त स्थान और नई लाइनों पर भी लेकिन कुछ अन्य विशेष वर्णों पर नहीं)

Comments

विशेष रूप से CSS के साथ: stackoverflow.com/questions/1011641/…

— Ciro Santilli 郝海东:::

Answer 1

बस सामग्री के साथ शैली white-space: pre-wrap;।

div {
    white-space: pre-wrap;
}

<div>
This is some text   with some extra spacing    and a
few newlines along with some trailing spaces        
     and five leading spaces thrown in
for                                              good
measure                                              
</div>

Comments

+1 यह समाधान साफ ​​है, और मैं इसके साथ SecurityElement.Escape विधि का उपयोग करने की सलाह दूंगा ।

— रयान गेट्स

@ user941632: आपके पास काम करने से रोकने के लिए कुछ अन्य स्टाइल होना चाहिए। यह यहाँ पर एक अवधि में काम करता है: jsfiddle.net/VwGSf/64

— pete

white-space: pre-line;यदि आप प्रत्येक पैराग्राफ की पहली पंक्ति नहीं चाहते हैं।

— विलनबर्गर

यह एक पुराना टिकट है, लेकिन एमडीएन जैसा एक संदर्भ जोड़ना अभी भी सार्थक हो सकता है, यह समझाने में मदद करने के लिए कि स्वीकृत उत्तर क्या कर रहा है :)

— फिल डी।

और अगर यह अभी भी जिस तरह से आप चाहते हैं कि यह आपके html तत्वों (या जो उन्हें उत्पन्न करता है के बीच सफेद स्थान की जाँच नहीं करता है - उदाहरण के लिए एक प्रतिज्ञा उदाहरण के लिए) नहीं दिखता है ...

— Yordan Georgiev

Answer 2

क्या आपने <pre>टैग का उपयोग करने की कोशिश की है

http://jsfiddle.net/NweRa/

Comments

यह एक निश्चित चौड़ाई के फ़ॉन्ट में मान प्रदर्शित करता है

— Dan डॉट नेट

स्टाइल बदलने के लिए आप css का उपयोग कर सकते हैं। मैंने अभी-अभी एक मूल उदाहरण लिखा है। आप @ पीट के उत्तर के अनुसार <प्री> टैग का उपयोग कर सकते हैं या सीएसएस का उपयोग कर सकते हैं।

— N30

Answer 3

आप व्हाइट-स्पेस का उपयोग कर सकते हैं : फॉर्मेटिंग में लाइन ब्रेक को संरक्षित करने के लिए प्री-लाइन । HTML तत्वों को मैन्युअल रूप से सम्मिलित करने की कोई आवश्यकता नहीं है।

.popover {
    white-space: pre-line;    
}

या अपने HTML तत्व में जोड़ें style="white-space: pre-line;"

Answer 4

आप सभी रिक्त स्थान को  (नॉन-ब्रेकिंग स्पेस) और सभी नई लाइनों \nको <<b></b>br>(html में लाइन ब्रेक) के साथ बदलना चाहेंगे । यह वह परिणाम प्राप्त करना चाहिए जिसे आप खोज रहे हैं।

body = body.replace(' ', &amp;nbsp;).replace('\n', '<<b></b>br>');

उस प्रकृति का कुछ।

Comments

यह काम करेगा, मुझे लगता है कि मैं सोच रहा था कि इसमें कुछ बनाया जाएगा। शायद मैं इसे सोच रहा हूं।

— डैन डॉट नेट

जहाँ तक मैंने देखा है कि वहाँ नहीं है, यह एक सरल प्रतिस्थापन करने के लिए बहुत अधिक उपरि नहीं है। मुझे नहीं लगता कि प्रदर्शन में कोई समस्या होगी।

— डेवलपर

मुझे लगता है कि MVC के साथ 'समस्या' यह है कि यदि मैं स्ट्रिंग को बदल देता हूं जैसा कि आप सुझाव देते हैं कि यह '& nbsp;' प्रदर्शित करेगा। रिक्त स्थान के बजाय, जब तक मैं @ Html.Raw () का उपयोग नहीं करता। फिर मुझे xss और खराब html में प्रवेश करने वाले उपयोगकर्ता के बारे में चिंतित होना होगा। हालाँकि मैं आवेषण पर स्ट्रिंग्स को एन्कोड कर सकता हूं ताकि मुझे इसके बारे में कम चिंता हो।

— डैन डॉट नेट

Answer 5

मैं white-space: pre-wrap;पीट द्वारा बताई गई तकनीक की कोशिश कर रहा था, लेकिन अगर स्ट्रिंग निरंतर थी और लंबे समय तक यह सिर्फ कंटेनर से बाहर चला गया था, और जो भी कारण के लिए ताना नहीं था , उसके पास जांच के लिए ज्यादा समय नहीं था .. लेकिन अगर आपके पास भी है एक ही समस्या है, मैं <pre>टैग और निम्नलिखित सीएसएस का उपयोग कर समाप्त हो गया और सब कुछ जाने के लिए अच्छा था ..

pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}

Answer 6

जैसा कि आपने @Developer के उत्तर पर उल्लेख किया है, मैं संभवतः उपयोगकर्ता इनपुट पर HTML-एनकोड करूंगा। यदि आप XSS के बारे में चिंतित हैं, तो संभवतः आपको उपयोगकर्ता के इनपुट की मूल रूप में आवश्यकता नहीं है, इसलिए आप इसे बच सकते हैं (और जब आप इस पर होते हैं तो रिक्त स्थान और नई सूचियों को बदल सकते हैं)।

ध्यान दें कि इनपुट पर भागने का मतलब है कि आपको उस विशेष इनपुट को रेंडर करने के लिए @ Html.Raw का उपयोग करना चाहिए या MvcHtmlString बनाना चाहिए।

आप भी आजमा सकते हैं

System.Security.SecurityElement.Escape(userInput)

लेकिन मुझे लगता है कि यह या तो रिक्त स्थान से नहीं बचेंगे। तो उस स्थिति में, मेरा सुझाव है कि बस एक .NET करो

System.Security.SecurityElement.Escape(userInput).Replace(" ", "&nbsp;").Replace("\n", "<br>")

उपयोगकर्ता इनपुट पर और यदि आप प्रयोज्य में गहरी खुदाई करना चाहते हैं, तो शायद आप उपयोगकर्ता के इनपुट का XML पार्स (या नियमित भावों के साथ खेल) केवल टैग के पूर्वनिर्धारित सेट की अनुमति दे सकते हैं। उदाहरण के लिए, अनुमति दें

<p>, <span>, <strong>

... लेकिन अनुमति नहीं है

<script> or <iframe>

Answer 7

एक textareaतत्व में विवरण लपेटें ।

Answer 8

इसे करने का एक सरल तरीका है। मैंने इसे अपने ऐप पर आज़माया और इसने बहुत अच्छा काम किया।

बस प्रकार: $ पाठ = $ पंक्ति ["पाठ"]; गूंज nl2br ($ पाठ);