जब मैं एक textarea से पाठ प्राप्त कर रहा हूँ तो मैं रेखा को कैसे सुरक्षित रखता हूँ?

Question 1

उपयोगकर्ता द्वारा सबमिट किए जाने पर मुझे टेक्स्टारिया में मान मिल रहा है। मैं तब इस मूल्य को लेता हूं और इसे पृष्ठ पर कहीं और रखता हूं। हालांकि, जब मैं ऐसा करता हूं, तो यह उत्पादन को बदसूरत बनाने वाले न्यूलाइन वर्ण खो देता है।

यहाँ मैं देख रहा हूँ textarea है:

<textarea id="post-text" class="form-control" rows="3" placeholder="What's up?" required></textarea>

यहां पोस्ट को एक्सेस करने और इसे ट्रांसक्रिप्ट करने के लिए जावास्क्रिप्ट कोड है।

var post = document.createElement('p');
var postText = document.getElementById('post-text').value;
post.append(postText);
var card = document.createElement('div');
card.append(post);
var cardStack = document.getElementById('#card-stack');
cardStack.prepend(card);

जब इनपुट कुछ इस तरह है:

समूह अनुसूची:

मंगलवार अभ्यास @ 5 वीं मंजिल (रात 8 बजे - 11 बजे)

गुरुवार अभ्यास @ 5 वीं मंजिल (रात 8 बजे - 11 बजे)

रविवार अभ्यास @ (रात 9 बजे - 12 बजे)

आउटपुट है:

समूह अनुसूची: मंगलवार अभ्यास @ ५ वीं मंजिल (रात 8 बजे - ११ बजे) गुरुवार अभ्यास @ ५ वीं मंजिल (रात pm बजे - ११ बजे) रविवार अभ्यास @ (९ बजे - १२ बजे)

तो क्या लाइन ब्रेक को संरक्षित करने का एक तरीका है?

Question 2

सबसे आसान उपाय यह है कि जिस तत्व को आप पाठ में सम्मिलित कर रहे हैं उसे निम्नलिखित सीएसएस संपत्ति के साथ शैली दें:

white-space: pre-wrap;

यह गुण मैचिंग तत्वों के भीतर व्हाट्सएप और न्यूलाइन को उसी तरह से व्यवहार करता है जैसे कि अंदर<textarea> । यही है, लगातार व्हॉट्सएप का पतन नहीं हुआ है, और लाइनें स्पष्ट रूप से नई रेखाओं पर टूटी हुई हैं (लेकिन तत्व की चौड़ाई से अधिक होने पर स्वचालित रूप से लपेटी जाती हैं)।

यह देखते हुए कि अब तक यहां पोस्ट किए गए उत्तरों में से कई HTML इंजेक्शन के लिए असुरक्षित हैं (उदाहरण के लिए, क्योंकि वे बिना इनपुट उपयोगकर्ता को असाइन करते हैं innerHTML) या अन्यथा छोटी गाड़ी है, मुझे अपने मूल कोड के आधार पर यह सुरक्षित और सही तरीके से करने का एक उदाहरण देता हूं:

कोड स्निपेट दिखाएं

document.getElementById('post-button').addEventListener('click', function () {
  var post = document.createElement('p');
  var postText = document.getElementById('post-text').value;
  post.append(postText);
  var card = document.createElement('div');
  card.append(post);
  var cardStack = document.getElementById('card-stack');
  cardStack.prepend(card);
});

#card-stack p {
  background: #ddd;
  white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */
}
textarea {
  width: 100%;
}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>

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

ध्यान दें, अपने मूल कोड की तरह, ऊपर स्निपेट उपयोग करता है append()और prepend()। इस लेखन के रूप में, उन कार्यों को अभी भी प्रयोगात्मक माना जाता है और सभी ब्राउज़रों द्वारा पूरी तरह से समर्थित नहीं है। यदि आप सुरक्षित रहना चाहते हैं और पुराने ब्राउज़रों के साथ संगत रहना चाहते हैं, तो आप उन्हें निम्न प्रकार से आसानी से स्थानापन्न कर सकते हैं:

element.append(otherElement)के साथ प्रतिस्थापित किया जा सकता है element.appendChild(otherElement);
element.prepend(otherElement)के साथ प्रतिस्थापित किया जा सकता है element.insertBefore(otherElement, element.firstChild);
element.append(stringOfText)के साथ प्रतिस्थापित किया जा सकता है element.appendChild(document.createTextNode(stringOfText));
element.prepend(stringOfText)के साथ प्रतिस्थापित किया जा सकता है element.insertBefore(document.createTextNode(stringOfText), element.firstChild);
विशेष मामले के रूप में, यदि elementखाली है, दोनों element.append(stringOfText)और element.prepend(stringOfText)बस के साथ बदला जा सकता है element.textContent = stringOfText।

यहाँ ऊपर के समान स्निपेट है, लेकिन बिना उपयोग append()या prepend():

कोड स्निपेट दिखाएं

document.getElementById('post-button').addEventListener('click', function () {
  var post = document.createElement('p');
  var postText = document.getElementById('post-text').value;
  post.textContent = postText;
  var card = document.createElement('div');
  card.appendChild(post);
  var cardStack = document.getElementById('card-stack');
  cardStack.insertBefore(card, cardStack.firstChild);
});

#card-stack p {
  background: #ddd;
  white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */
}
textarea {
  width: 100%;
}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>

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

Ps। यदि आप सीएसएस संपत्ति का उपयोग किए बिना वास्तव में ऐसा करना चाहते white-spaceहैं, तो एक वैकल्पिक समाधान स्पष्ट रूप से <br>HTML टैग्स के साथ पाठ में किसी भी नए वर्ण को बदलना होगा । मुश्किल हिस्सा यह है कि, सूक्ष्म कीड़े और संभावित सुरक्षा छिद्रों को शुरू करने से बचने के लिए, आपको पाठ में किसी भी HTML मेटाचैकर्स (न्यूनतम &और कम से कम <) से बचना होगा। पहले इस प्रतिस्थापन को करने ।

संभवत: ऐसा करने का सबसे सरल और सुरक्षित तरीका है कि ब्राउज़र को आपके लिए HTML-भागने से बचाए, जैसे:

var post = document.createElement('p');
post.textContent = postText;
post.innerHTML = post.innerHTML.replace(/\n/g, '<br>\n');

कोड स्निपेट दिखाएं

document.getElementById('post-button').addEventListener('click', function () {
  var post = document.createElement('p');
  var postText = document.getElementById('post-text').value;
  post.textContent = postText;
  post.innerHTML = post.innerHTML.replace(/\n/g, '<br>\n');  // <-- THIS FIXES THE LINE BREAKS
  var card = document.createElement('div');
  card.appendChild(post);
  var cardStack = document.getElementById('card-stack');
  cardStack.insertBefore(card, cardStack.firstChild);
});

#card-stack p {
  background: #ddd;
}
textarea {
  width: 100%;
}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>

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

ध्यान दें, जबकि यह लाइन ब्रेक को ठीक कर देगा, यह HTML व्हाट्सएप द्वारा लगातार व्हाट्सएप को गिरने से नहीं रोकेगा। यह संभव है कि (तरह) अनुकरण करें कि पाठ में कुछ व्हाट्सएप को गैर-ब्रेकिंग स्पेस के साथ बदल दिया जाए, लेकिन ईमानदारी से, यह कुछ ऐसी चीज़ों के लिए जटिल हो रहा है जो सीएसएस की एक पंक्ति के साथ तुच्छ रूप से हल हो सकती हैं।

Question 3

लक्ष्य कंटेनर में white-space:preशैली होनी चाहिए । इसे नीचे आज़माएं।

<script>
function copycontent(){
 var content = document.getElementById('ta').value;
 document.getElementById('target').innerText = content;
}
</script>
<textarea id='ta' rows='3'>
  line 1
  line 2
  line 3
</textarea>
<button id='btn' onclick='copycontent();'>
Copy
</button>
<p id='target' style='white-space:pre'>

</p>

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

Question 4

function get() {
  var arrayOfRows = document.getElementById("ta").value.split("\n");
  var docfrag = document.createDocumentFragment();
  
  var p = document.getElementById("result");
  while (p.firstChild) {
    p.removeChild(p.firstChild);
  }
  
  arrayOfRows.forEach(function(row, index, array) {
    var span = document.createElement("span");
    span.textContent = row;
    docfrag.appendChild(span);
    if(index < array.length - 1) {
      docfrag.appendChild(document.createElement("br"));
    }
  });

  p.appendChild(docfrag);
}

<textarea id="ta" rows=3></textarea><br>
<button onclick="get()">get</button>
<p id="result"></p>

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

आप textarea पंक्तियों को सरणी में विभाजित कर सकते हैं:

var arrayOfRows = postText.value.split("\n");

फिर इसे जनरेट करने के लिए उपयोग करें, हो सकता है, अधिक पी टैग ...

Question 5

यहां एक विचार दिया गया है क्योंकि आपके पास एक टेक्स्टबॉक्स में कई न्यूलाइन हो सकते हैं:

 var text=document.getElementById('post-text').value.split('\n');
 var html = text.join('<br />');

यह HTML मान न्यूलाइन को संरक्षित करेगा। उम्मीद है की यह मदद करेगा।

Question 6

आप widthजावास्क्रिप्ट का उपयोग करके div को सेट कर सकते हैं और जोड़ white-space:pre-wrapसकते हैं p tag, इससे प्रत्येक लाइन के अंत में आपकी पाठ्य सामग्री को तोड़ सकते हैं।

document.querySelector("button").onclick = function gt(){
var card = document.createElement('div');
card.style.width = "160px";
card.style.background = "#eee";
var post = document.createElement('p');
var postText = document.getElementById('post-text').value;
post.style.whiteSpace = "pre-wrap";
card.append(post);
post.append(postText);
document.body.append(card);
}

<textarea id="post-text" class="form-control" rows="3" placeholder="What's up?" required>
Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea>
<br><br>
<button>Copy!!</button>

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

Question 7

मुझे लगता है कि आप नहीं चाहते कि आपका टेक्स्टरी-कंटेंट HTML के रूप में पार्स किया जाए। इस स्थिति में, आप इसे केवल प्लेटेक्स्ट के रूप में सेट कर सकते हैं, इसलिए ब्राउज़र इसे HTML के रूप में नहीं मानता है और यह आवश्यक नहीं है कि कोई सीएसएस या प्रीप्रोसेसिंग को हटा दें।

<script>
function copycontent(){
 var content = document.getElementById('ta').value;
 document.getElementById('target').innerText = content;
}
</script>
<textarea id='ta' rows='3'>
  line 1
  line 2
  line 3
</textarea>
<button id='btn' onclick='copycontent();'>
Copy
</button>
<p id='target'></p>

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

Question 8

इसी तरह के सवाल यहां हैं

एक पाठ क्षेत्र इनपुट में पता लगाने की रेखा टूट जाती है

Textarea में लाइन ब्रेक का पता लगाएं

आप यह कोशिश कर सकते हैं:

var submit = document.getElementById('submit');

submit.addEventListener('click', function(){
var textContent = document.querySelector('textarea').value;
  
document.getElementById('output').innerHTML = textContent.replace(/\n/g, '<br/>');
  

});

<textarea cols=30 rows=10 >This is some text
this is another text

Another text again and again</textarea>
<input type='submit' id='submit'>


<p id='output'></p>

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

document.querySelector('textarea').value;textarea की पाठ्य सामग्री प्राप्त करेगा और सामग्री में textContent.replace(/\n/g, '<br/>')स्रोत कोड /\n/gमें सभी न्यूलाइन वर्ण ढूंढेगा और इसे html लाइन-ब्रेक से बदल देगा <br/>।

एक अन्य विकल्प html <pre> टैग का उपयोग करना है । नीचे डेमो देखें

var submit = document.getElementById('submit');

submit.addEventListener('click', function(){

  var content = '<pre>';
  
  var textContent = document.querySelector('textarea').value;
  
  content += textContent;
  
  content += '</pre>';

  document.getElementById('output').innerHTML = content;

});

<textarea cols=30 rows=10>This is some text
this is another text

Another text again and again </textarea>
<input type='submit' id='submit'>

<div id='output'> </div>

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