ฉันจะรักษาการแบ่งบรรทัดเมื่อได้รับข้อความจากพื้นที่ข้อความได้อย่างไร

Question 1

ฉันได้รับค่าใน textarea เมื่อผู้ใช้กดส่ง จากนั้นฉันจะนำค่านี้ไปวางไว้ที่อื่นในหน้า อย่างไรก็ตามเมื่อฉันทำสิ่งนี้มันจะสูญเสียอักขระขึ้นบรรทัดใหม่ทำให้ผลลัพธ์ค่อนข้างน่าเกลียด

นี่คือ textarea ที่ฉันกำลังเข้าถึง:

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

นี่คือรหัส JavaScript ที่เข้าถึงโพสต์และถอดเสียง

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 (20.00 น. - 23.00 น.)

ซ้อมวันพฤหัสบดีที่ชั้น 5 (20.00 น. - 23.00 น.)

ซ้อมวันอาทิตย์ @ (21.00 น. - 12.00 น.)

ผลลัพธ์คือ:

ตารางเรียนวันอังคารที่ชั้น 5 (20.00 น. - 23.00 น.) ซ้อมวันพฤหัสบดีที่ชั้น 5 (20.00 น. - 23.00 น.) ซ้อมวันอาทิตย์ @ (21.00 - 12.00 น.)

มีวิธีรักษาการแบ่งบรรทัดหรือไม่?

Question 2

วิธีแก้ปัญหาที่ง่ายที่สุดคือจัดรูปแบบองค์ประกอบที่คุณกำลังแทรกข้อความด้วยคุณสมบัติ CSS ต่อไปนี้:

white-space: pre-wrap;

คุณสมบัตินี้ทำให้ช่องว่างและขึ้นบรรทัดใหม่ภายในองค์ประกอบที่ตรงกันได้รับการปฏิบัติในลักษณะเดียวกับภายใน a <textarea>. นั่นคือช่องว่างที่ต่อเนื่องกันจะไม่ยุบและเส้นจะขาดที่บรรทัดใหม่ที่ชัดเจน (แต่จะถูกพันโดยอัตโนมัติหากเกินความกว้างขององค์ประกอบ)

เนื่องจากคำตอบหลายข้อที่โพสต์ไว้ที่นี่มีความเสี่ยงต่อการแทรก HTML (เช่นเนื่องจากพวกเขากำหนดอินพุตของผู้ใช้ที่ไม่ใช้ Escape 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>

Expand snippet

โปรดทราบว่าเช่นรหัสเดิมของคุณตัวอย่างข้อมูลข้างต้นใช้และ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>

Expand snippet

Ps. หากคุณต้องการทำสิ่งนี้โดยไม่ใช้white-spaceคุณสมบัติCSS จริงๆทางเลือกอื่นคือแทนที่อักขระขึ้นบรรทัดใหม่ในข้อความด้วย<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>

Expand snippet

โปรดทราบว่าแม้ว่าวิธีนี้จะแก้ไขการแบ่งบรรทัด แต่จะไม่ป้องกันไม่ให้ช่องว่างที่ติดต่อกันถูกยุบโดยตัวแสดงผล HTML เป็นไปได้ที่จะ (เรียงลำดับ) เลียนแบบโดยการแทนที่ช่องว่างบางส่วนในข้อความด้วยช่องว่างที่ไม่ทำลาย แต่จริงๆแล้วมันค่อนข้างซับซ้อนสำหรับบางสิ่งที่สามารถแก้ไขได้เล็กน้อยด้วย CSS บรรทัดเดียว

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");

จากนั้นใช้เพื่อสร้างแท็ก p เพิ่มเติม ...

Question 5

นี่คือแนวคิดเนื่องจากคุณอาจมีการขึ้นบรรทัดใหม่หลายรายการในกล่องข้อความ:

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

ค่า HTML นี้จะรักษาขึ้นบรรทัดใหม่ หวังว่านี่จะช่วยได้

Question 6

คุณสามารถตั้งค่าwidthdiv โดยใช้ Javascript และเพิ่มwhite-space:pre-wrapเข้าไปp tagซึ่งจะแบ่งเนื้อหา textarea ของคุณในตอนท้ายของแต่ละบรรทัด

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 และไม่ลบบรรทัดใหม่ไม่ต้องใช้ CSS หรือการประมวลผลล่วงหน้า

<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/>ที่เส้นแบ่ง

อีกทางเลือกหนึ่งคือการใช้ <pre>แท็กhtml ดูการสาธิตด้านล่าง

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>

ขยายข้อมูลโค้ด