টেক্সেরিয়া থেকে পাঠ্য পাওয়ার সময় আমি কীভাবে লাইন ব্রেকগুলি সংরক্ষণ করব?

Question 1

যখন ব্যবহারকারী সাবমিট হিট করে আমি একটি টেক্সারিয়ায় মান পাচ্ছি। আমি তখন এই মানটি নিয়ে এটি পৃষ্ঠায় অন্যত্র রাখি। যাইহোক, আমি যখন এটি করি তখন এটি আউটপুটটিকে বেশ কুরুচিপূর্ণ করে তোলে নতুন লাইন অক্ষরগুলি হারায়।

আমি যে টেক্সারিয়াটি অ্যাক্সেস করছি তা এখানে:

<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 টা)

আউটপুটটি হ'ল:

গ্রুপের সময়সূচি: মঙ্গলবার অনুশীলন @ 5 তম (রাত 8 টা - 11 টা) বৃহস্পতিবার অনুশীলন @ 5 তম (রাত 8 টা - 11 টা) রবিবার অনুশীলন @ (রাত 9 টা - 12 টা)

সুতরাং লাইন বিরতি সংরক্ষণ করার উপায় আছে?

Question 2

সবচেয়ে সহজ সমাধানটি হ'ল নীচের CSS বৈশিষ্ট্য সহ আপনি যে উপাদানটি প্রবেশ করিয়ে দিচ্ছেন সেটি স্টাইল করা:

white-space: pre-wrap;

এই বৈশিষ্ট্যটির সাথে মিলের উপাদানগুলির মধ্যে শ্বেত স্থান এবং নিউলাইনগুলি এ এর অভ্যন্তরের মতো একইরকম আচরণ করা হয় <textarea>। অর্থাত্, পর পরের শ্বেত স্থানটি ধসে পড়ে না, এবং লাইনগুলি স্পষ্টত নিউলাইনগুলিতে ভাঙা হয় (তবে তারা যদি উপাদানটির প্রস্থের বেশি হয় তবে স্বয়ংক্রিয়ভাবে মোড়ানো হবে)।

এখন পর্যন্ত এখানে পোস্ট করা বেশ কয়েকটি উত্তর এইচটিএমএল ইনজেকশনের ঝুঁকির মধ্যে রয়েছে (যেমন তারা অনস্কেপযুক্ত ব্যবহারকারীদের ইনপুট দেয় 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>

স্নিপেট প্রসারিত করুন

পুনশ্চ. আপনি যদি সিএসএস সম্পত্তি ব্যবহার না করে সত্যিই এটি করতে চান white-space, তবে বিকল্প বিকল্প হ'ল <br>এইচটিএমএল ট্যাগের সাহায্যে পাঠ্যের কোনও নতুন লাইন অক্ষর স্পষ্টভাবে প্রতিস্থাপন করা হবে । জটিল অংশটি হ'ল, সূক্ষ্ম বাগ এবং সম্ভাব্য সুরক্ষা গর্তগুলি প্রবর্তন এড়াতে, আপনাকে এই প্রতিস্থাপনটি করার আগে আপনাকে প্রথমে কোনও 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>

স্নিপেট প্রসারিত করুন

মনে রাখবেন, এটি লাইন ব্রেকগুলি ঠিক করবে, ততক্ষণে এটি এইচটিএমএল রেন্ডারারের দ্বারা ধীরে ধীরে হোয়াইটস্পেসকে ধসে পড়তে বাধা দেবে না। (সাজানোর) অনুকরণ করা সম্ভব যে পাঠ্যের কিছু শ্বেতস্পেসকে অ-ব্রেকিং স্পেসে প্রতিস্থাপনের মাধ্যমে, তবে সত্যই, এটি এমন কোনও সমস্যার জন্য জটিল হয়ে উঠছে যা সিএসএসের একক লাইন দিয়ে তুচ্ছভাবে সমাধান করা যায়।

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>

স্নিপেট প্রসারিত করুন

আপনি টেক্সারিয়া সারিগুলিকে অ্যারেতে বিভক্ত করতে পারেন:

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

তারপরে এটি তৈরি করতে ব্যবহার করুন, সম্ভবত, আরও পি ট্যাগ ...

Question 5

পাঠ্যবক্সে আপনার একাধিক নতুন লাইন থাকতে পারে বলে এখানে একটি ধারণা দেওয়া হল:

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

এই এইচটিএমএল মানটি নিউলাইন সংরক্ষণ করবে। আশাকরি এটা সাহায্য করবে.

Question 6

আপনি widthজাভাস্ক্রিপ্ট ব্যবহার করে ডিভ সেট করতে এবং যুক্ত 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 হিসাবে বিবেচনা করে না এবং নতুন লাইনগুলি কোনও সিএসএস বা প্রিপ্রোসেসিং প্রয়োজন হয় না।

<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

অনুরূপ প্রশ্ন এখানে

একটি পাঠ্য ক্ষেত্রের ইনপুটটিতে লাইন বিরতি সনাক্ত করুন

পাঠ্যরেখায় লাইন বিরতি সনাক্ত করুন

আপনি এটি চেষ্টা করতে পারেন:

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;টেক্সটরিয়ার পাঠ্য সামগ্রী পাবেন এবং সামগ্রীতে textContent.replace(/\n/g, '<br/>')সোর্স কোডের সমস্ত নিউলাইন অক্ষর খুঁজে পাবেন /\n/gএবং এটি এইচটিএমএল লাইন-ব্রেকের সাথে প্রতিস্থাপন করবেন <br/>।

আরেকটি বিকল্প হ'ল এইচটিএমএল <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>

স্নিপেট প্রসারিত করুন