Bir metin alanından metin alırken satır sonlarını nasıl koruyabilirim?

Kullanıcı gönder düğmesine bastığında değeri bir metin alanında alıyorum. Daha sonra bu değeri alıp sayfanın başka bir yerine yerleştiriyorum. Ancak, bunu yaptığımda, çıktıyı oldukça çirkinleştiren yeni satır karakterlerini kaybediyor.

İşte eriştiğim metin alanı:

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

İşte gönderiye erişen ve onu kopyalayan JavaScript kodu.

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

Giriş şöyle bir şey olduğunda:

Grup Programı:

5. katta Salı antrenmanı (20:00 - 23:00)

5. katta Perşembe antrenmanı (20:00 - 23:00)

Pazar antrenmanı @ (21:00 - 12:00)

Çıktı:

Grup Programı: 5. katta Salı antrenmanı (20:00 - 23:00) Perşembe antrenmanı, 5. katta (20:00 - 23:00) Pazar antrenmanı @ (21:00 - 12:00)

Peki, satır sonlarını korumanın bir yolu var mı?

En kolay çözüm, metni eklediğiniz öğenin aşağıdaki CSS özelliğiyle stilini belirlemektir:

white-space: pre-wrap;

Bu özellik , eşleşen elemanlar içindeki beyaz boşlukların ve satırsonlarının a içindekilerle aynı şekilde ele alınmasına neden olur <textarea>. Yani, ardışık beyaz boşluklar daraltılmaz ve satırlar açık yeni satırlarda kesilir (ancak öğenin genişliğini aşarlarsa otomatik olarak kaydırılırlar).

Şimdiye kadar burada yayınlanan cevapların birçoğunun HTML yerleştirmeye açık olduğu (örneğin, çıkış karaktersiz kullanıcı girdisi atadıkları için innerHTML) veya yanlış olduğu göz önüne alındığında, orijinal kodunuza dayanarak bunu güvenli ve doğru şekilde nasıl yapacağınıza dair bir örnek vereyim:

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>

Orijinal kodunuz gibi yukarıdaki kod parçasının append()ve kullandığını unutmayın prepend(). Bu yazı itibariyle, bu işlevler hala deneysel olarak kabul edilmektedir ve tüm tarayıcılar tarafından tam olarak desteklenmemektedir. Güvende olmak ve eski tarayıcılarla uyumlu kalmak istiyorsanız, bunları aşağıdaki gibi kolayca değiştirebilirsiniz:

• element.append(otherElement)ile değiştirilebilir element.appendChild(otherElement);
• element.prepend(otherElement)ile değiştirilebilir element.insertBefore(otherElement, element.firstChild);
• element.append(stringOfText)ile değiştirilebilir element.appendChild(document.createTextNode(stringOfText));
• element.prepend(stringOfText)ile değiştirilebilir element.insertBefore(document.createTextNode(stringOfText), element.firstChild);
• özel bir durum olarak, elementboşsa, her ikisi de element.append(stringOfText)ve element.prepend(stringOfText)basitçe ile değiştirilebilir element.textContent = stringOfText.

İşte yukarıdakiyle aynı kod parçacığı, append()veya kullanmadan 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. Bunu gerçekten yapmak istiyorsanız olmadan CSS kullanarak white-spaceözelliğini alternatif bir çözüm ile açıkça metinde herhangi satır karakterlerini değiştirmek şeklinde olur <br>HTML etiketleri. İşin zor kısmı, ince hatalar ve olası güvenlik açıklarından kaçınmak için, bu değişikliği yapmadan önce metindeki herhangi bir HTML meta karakterinden (en azından &ve <) kaçınmanız gerektiğidir.

Muhtemelen bunu yapmanın en basit ve en güvenli yolu, tarayıcının sizin için HTML çıkışını işlemesine izin vermektir, örneğin:

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>

Bu, satır sonlarını düzeltirken, ardışık beyaz boşlukların HTML oluşturucu tarafından daraltılmasını engellemeyeceğini unutmayın. Metindeki boşlukların bir kısmını bölünemez boşluklarla değiştirerek bunu (bir nevi) taklit etmek mümkündür, ancak dürüst olmak gerekirse, tek bir CSS satırı ile önemsiz bir şekilde çözülebilecek bir şey için bu oldukça karmaşık hale gelmektedir.

Hedef kapsayıcı white-space:prestile sahip olmalıdır . Aşağıda deneyin.

<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>

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>

Metin alanı satırlarını diziye bölebilirsiniz:

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

Daha sonra, belki daha fazla p etiketi oluşturmak için kullanın ...

Bir metin kutusunda birden fazla yeni satırınız olabileceği için işte bir fikir:

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

Bu HTML değeri yeni satırı koruyacaktır. Bu yardımcı olur umarım.

Sen ayarlayabilirsiniz widthdiv kullanarak Javascript ve eklemek white-space:pre-wrapiçin p tagher satırın sonunda bu mola, sizin textarea içeriği.

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>

Metin alanı içeriğinizin HTML olarak ayrıştırılmasını istemediğinizi varsayalım. Bu durumda, tarayıcının onu HTML olarak ele almaması ve yeni satırları kaldırmaması için düz metin olarak ayarlayabilirsiniz. CSS veya ön işleme gerekmez.

<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>

Benzer sorular burada

bir metin alanı girişindeki satır sonlarını algılama

metin alanında satır sonunu algıla

Bunu deneyebilirsiniz:

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;metin alanının metin içeriğini alacak ve içerikteki textContent.replace(/\n/g, '<br/>')kaynak kodda tüm satırsonu karakterini bulacak /\n/gve onu html satır sonu ile değiştirecektir <br/>.

Diğer bir seçenek de html <pre> etiketini kullanmaktır . Aşağıdaki demoya bakın

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>