텍스트 영역에서 텍스트를 가져올 때 줄 바꿈을 어떻게 유지합니까?

사용자가 제출을 누르면 텍스트 영역에 값이 표시됩니다. 그런 다음이 값을 페이지의 다른 곳에 배치합니다. 그러나 이렇게하면 개행 문자가 없어 출력이 매우 추악합니다.

내가 액세스하는 텍스트 영역은 다음과 같습니다.

<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 층 (오후 8시-오후 11시)

목요일 연습 @ 5 층 (오후 8시-오후 11시)

일요일 연습 @ (오후 9시-오전 12시)

출력은 다음과 같습니다.

그룹 일정 : 화요일 연습 @ 5 층 (오후 8시-오후 11시) 목요일 연습 @ 5 층 (오후 8시-오후 11시) 일요일 연습 @ (오후 9시-오전 12시)

그렇다면 줄 바꿈을 유지하는 방법이 있습니까?

가장 쉬운 해결책은 다음 CSS 속성을 사용하여 텍스트를 삽입 할 요소의 스타일을 지정하는 것입니다.

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>

추신. CSS 속성 을 사용 하지 않고이 작업을 수행하려는 경우 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 렌더러에 의해 연속 된 공백이 축소되는 것을 방지 할 수는 없습니다. 텍스트의 일부 공백을 끊기지 않는 공백으로 대체하여 (일종의) 에뮬레이션 할 수 있지만 솔직히 CSS 한 줄로 사소하게 해결할 수있는 문제는 다소 복잡해집니다.

대상 컨테이너에는 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>

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 태그를 생성하는 데 사용합니다.

다음은 텍스트 상자에 여러 줄 바꿈이있을 수있는 아이디어입니다.

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

이 HTML 값은 개행을 유지합니다. 도움이 되었기를 바랍니다.

widthJavascript를 사용하여 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>

텍스트 영역 내용이 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>

비슷한 질문이 있습니다.

텍스트 영역 입력에서 줄 바꿈 감지

텍스트 영역에서 줄 바꿈 감지

이것을 시도 할 수 있습니다.

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에서 모든 줄 바꿈 문자를 찾아 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>