문자열에 새 줄 (\ n)을 사용하고 HTML에서 동일하게 렌더링

88

나는 문자열이

string display_txt = "1st line text" +"\n" + "2nd line text";

Jquery에서 사용하려고합니다.

('#somediv').html(display_txt).css("color", "green")

내 메시지가 두 줄로 표시 될 것으로 예상하고 있지만 대신 \ n이 메시지에 표시됩니다. 그것에 대한 빠른 수정이 있습니까?

감사,

— KeenUser
소스

1

아주 분명합니다. 대답은 귀하의 질문에 있습니다. div의 오류 메시지를 html로 렌더링하려고합니다. 따라서 <br />태그 를 사용할 수 있습니다

— Murtaza

두 줄을 예상하는 데 "명확한"것은 없습니다. 반대로, 개행이 일반 공간으로 렌더링되고 필요한 경우에만 줄을 감싸는 것이 분명합니다. HTML이 작동하는 방식이며 물론 .html작동 방식 이기도합니다 .

2

내 문자열을 "1st line text"및 "2nd line text"로 저장 한 컨텍스트에서 html이 작동하는 방식이 아니라 2 줄로 표시되는 것이 분명했습니다.) 감사합니다.

— KeenUser 2011-12-20

관련 : stackoverflow.com/questions/9726970/...

— frederj

79

<br />html에서 새 줄에 사용 :

display_txt = display_txt.replace(/\n/g, "<br />");

— Samich
소스

1

어떤 이유로 "\ n"을 "\\ n"으로 이스케이프해야합니다. 그렇지 않으면 작동하지 않습니다. (Chrome 46에서 테스트 됨). 이유는 무엇입니까?

— Sujay Phadke 2015

2

이것은 \n문자열 내부의 첫 번째 문자 만 대체 합니다. MDN 문서

— Dominic Boulanger

3

가장 좋은 .replace(/\n/g, "<br />")것은 더 많은 개행을 방지하는 것입니다.

— KingRider

2

@vsync의 대답이 받아 들여 져야한다고 생각합니다.

— Ayush 쿠마

완벽하게 작동했습니다. 감사합니다.

— joshlsullivan

177

표 셀의 CSS를 다음과 같이 설정하십시오.

white-space:pre-wrap;

document.body.innerHTML = 'First line\nSecond line\nThird line';

body{ white-space:pre-wrap; }

스 니펫 확장

— vsync
소스

6

그래서 이것이 받아 들여진 대답이어야하지 않습니까? LE :이 단지 IE 8 이상에서 지원되는지 참조 링크

— gciochina

4

이 대답은 XSS 취약점을 일으키지 않기 때문에 innerHTML을 설정하는 것보다 훨씬 낫습니다.

— LinusK

4

게다가, white-space:pre-line;공백 시퀀스가 단일 공백으로 축소되므로 사용할 수 있습니다 . 텍스트는 필요할 때 줄 바꿈하고 줄 바꿈합니다. 에 대한 자세한 정보 : https://www.w3schools.com/cssref/pr_text_white-space.asp

— HakuteiJ

이 답변으로 변환 \ n하지 않는 개행 문자 내

— irl_irl

2

@ste_irl-무슨 뜻이야? \n수단은 새로운 라인을 인쇄 할 수 있어야하고 그것을 인쇄 않습니다

— 수직 동기화

7

div 대신 pre 태그를 사용할 수 있습니다. 이렇게하면 \ n이 올바른 방식으로 자동으로 표시됩니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
         var display_txt = "1st line text" +"\n" + "2nd line text";
         $('#somediv').html(display_txt).css("color", "green");
});
</script>
</head>
<body>

<pre>
<p id="somediv"></p>
</pre>

</body>
</html>

— Frank im Wald
소스

1

어쩌면 .text대신 .html?

0

나는 데이터베이스에서 데이터를 가져오고 \n. 위의 솔루션 중 어느 것도 나를 위해 일하지 않았고 마침내 해결책을 찾았습니다 .https : //stackoverflow.com/a/61484190/7251208

— 케빈 H 그리피스
소스