텍스트 영역의 줄 바꿈

텍스트 영역의 줄 바꿈

---

<textarea cols='60' rows='8'>This is my statement one.\n This is my statement2</textarea>

<textarea cols='60' rows='8'>This is my statement one.<br/> This is my statement2</textarea>

둘 다 시도했지만 html 파일을 렌더링하는 동안 줄 바꿈이 반영되지 않습니다. 어떻게해야합니까?

---

이거 한번 해봐:

    <textarea cols='60' rows='8'>This is my statement one.&#13;&#10;This is my statement2</textarea>


줄 바꿈 및 
캐리지 리턴은 HTML 엔티티 ^wikipedia 입니다. 이렇게하면 실제로 새 줄 ( "\ n")을 텍스트로 표시하지 않고 구문 분석합니다.

---

<textarea cols='60' rows='8'>This is my statement one.

This is my statement2</textarea>

그것이 작동한다는 것을 보여주는 바이올린 : http://jsfiddle.net/trott/5vu28/ .

소스 파일에서 이것을 한 줄로 만들고 싶다면 @Bakudan의 답변에 표시된 것처럼 줄 바꿈과 캐리지 리턴에 대한 HTML 문자 참조를 삽입 할 수 있습니다.

  <textarea cols='60' rows='8'>This is my statement one.&#13;&#10;This is my statement2</textarea>

---

String.fromCharCode(13, 10)뷰 엔진을 사용할 때 도움 이되었습니다 . https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

이렇게하면 실제 줄 바꿈 문자가 포함 된 문자열이 생성되므로 뷰 엔진이 이스케이프 된 버전이 아닌 줄 바꿈을 출력하도록합니다. 예 : NodeJS EJS 뷰 엔진 사용-\ n을 바꾸는 간단한 예입니다.

viewHelper.js

exports.replaceNewline = function(input) {
    var newline = String.fromCharCode(13, 10);
    return input.replaceAll('\\n', newline);
}

EJS

<textarea><%- viewHelper.replaceNewline("Blah\nblah\nblah") %></textarea>

렌더

<textarea>Blah
blah
blah</textarea>

---

모두 다 바꿔:

String.prototype.replaceAll = function (find, replace) {
    var result = this;
    do {
        var split = result.split(find);
        result = split.join(replace);
    } while (split.length > 1);
    return result;
};

---

다른 언어의 구문을 혼란스럽게 생각합니다.

• 
HTML 문자열 의 HtmlEncoded 값 (ASCII 10 또는 줄 바꿈 문자 리터럴)입니다 . 그러나 줄 바꿈 문자는 HTML에서 줄 바꿈으로 렌더링 되지 않습니다 (아래 참고 참고).

• \nJavascript 문자열 의 줄 바꿈 문자 리터럴 (ASCII 10)입니다 .

• <br/>HTML에서 줄 바꿈입니다. 많은 다른 요소는, 예를 들어 <p>, <div>어떤 스타일로 덮어 쓰지 않는 등도 줄 바꿈을 렌더링합니다.

다음 그림 이 더 명확 해지기를 바랍니다 .

T.innerText = "Position of LF: " + t.value.indexOf("\n");

p1.innerHTML = t.value;
p2.innerHTML = t.value.replace("\n", "<br/>");
p3.innerText = t.value.replace("\n", "<br/>");

<textarea id="t">Line 1&#10;Line 2</textarea>

<p id='T'></p>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>

HTML에 대해 알아야 할 몇 가지 사항 :

• 요소 의 innerHTML값은 TEXTAREAHTML을 렌더링하지 않습니다. 다음을 시도 <textarea>A <a href='x'>link</a>.</textarea>하십시오.
• 이 P요소는 모든 인접한 공백 (새 줄 포함)을 하나의 공백으로 렌더링합니다.
• LF 문자는 HTML에서 줄 바꿈 또는 줄 바꿈으로 렌더링되지 않습니다.
• 는 TEXTAREA텍스트 영역 상자 안에 새로운 라인으로 LF를 렌더링합니다.

---

이것을 시도하십시오. 그것은 작동합니다 :

<textarea id="test" cols='60' rows='8'>This is my statement one.&#10;This is my statement2</textarea>

태그 교체 :

$("textarea#test").val(replace($("textarea#test").val(), "<br>", "&#10;")));

---

텍스트 영역 안에 줄 바꿈을하려면 실제 줄 바꿈을 넣으십시오.

    <textarea cols='60' rows='8'>This is my statement one.
    This is my statement2</textarea>

---

\n대신에 사용하고 싶을 수도 있습니다 /n.

---

CSS를 사용하여 텍스트 영역에 키워드 줄을 입력하십시오.

white-space: pre-wrap;

---

많은 테스트 후 Typescreipt에서 다음 코드가 작동합니다.

 export function ReplaceNewline(input: string) {
    var newline = String.fromCharCode(13, 10);
    return ReplaceAll(input, "<br>", newline.toString());
}
export function ReplaceAll(str, find, replace) {
    return str.replace(new RegExp(find, 'g'), replace);
}

---

.replace()다른 답변에 설명 된 패턴을 사용한 내 기능이 작동하지 않았습니다. 내 경우에 효과가 있었던 패턴은 다음과 같습니다.

var str = "Test\n\n\Test\n\Test";
str.replace(/\r\n|\r|\n/g,'
');

// str: "Test

Test
Test"

---

T.innerText = "LF 위치 :"+ t.value.indexOf ( "\ n");

p3.innerText = t.value.replace("\n", "");

<textarea id="t">Line 1&#10;Line 2</textarea>

<p id='p3'></p>

---

그냥 <br>
ex를 사용하십시오 :

<textarea>
blablablabla <br> kakakakakak <br> fafafafafaf 
</textarea>

결과 :
blablablabla
kakakakakak
fafafafafaf

참고 URL : https://stackoverflow.com/questions/8627902/new-line-in-text-area