j쿼리 텍스트() 및 줄 바꿈

j쿼리 텍스트() 및 줄 바꿈

나는 말할 수 있기를 원합니다.

$(someElem).text('this\n has\n newlines);

브라우저의 새 줄로 렌더링합니다.제가 찾은 유일한 해결책은 일부 Elem에서 cs 속성 'white-space'를 'pre'로 설정하는 것입니다.이는 거의 작동하지만, 패딩을 0으로 설정해도 텍스트와 일부 Elem 상단 사이에 성가시게 큰 패딩이 있습니다.이것을 없앨 방법이 있습니까?

2015년입니다.이 질문에 대한 정답은 CSS를 사용하는 것입니다.white-space: pre-line아니면white-space: pre-wrap. 깔끔하고 우아합니다.쌍을 지원하는 IE의 최저 버전은 8입니다.

https://css-tricks.com/almanac/properties/w/whitespace/

추신. CSS3가 일반화되기 전까지는 초기 및/또는 후행 화이트스페이스를 수동으로 잘라내야 할 것입니다.

jQuery 개체를 변수에 저장하면 다음 작업을 수행할 수 있습니다.

var obj = $("#example").text('this\n has\n newlines');
obj.html(obj.html().replace(/\n/g,'<br/>'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

원하는 경우 jQuery.text()가 다음과 같이 간단한 호출로 이 작업을 수행할 수 있는 함수를 만들 수도 있습니다.

$.fn.multiline = function(text){
    this.text(text);
    this.html(this.html().replace(/\n/g,'<br/>'));
    return this;
}

// Now you can do this:
$("#example").multiline('this\n has\n newlines');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

사용 방법은 다음과 같습니다.

function htmlForTextWithEmbeddedNewlines(text) {
    var htmls = [];
    var lines = text.split(/\n/);
    // The temporary <div/> is to perform HTML entity encoding reliably.
    //
    // document.createElement() is *much* faster than jQuery('<div></div>')
    // http://stackoverflow.com/questions/268490/
    //
    // You don't need jQuery but then you need to struggle with browser
    // differences in innerText/textContent yourself
    var tmpDiv = jQuery(document.createElement('div'));
    for (var i = 0 ; i < lines.length ; i++) {
        htmls.push(tmpDiv.text(lines[i]).html());
    }
    return htmls.join("<br>");
}
jQuery('#div').html(htmlForTextWithEmbeddedNewlines("hello\nworld"));

또는 다음을 사용해 보십시오..html그다음에 포장을.<pre>태그:

$(someElem).html('this\n has\n newlines').wrap('<pre />');

대신 사용할 수 있습니다.text그리고 각각의 발생을 대체합니다.\n와 함께<br>. 하지만 당신은 정확하게 당신의 문자에서 벗어나야 할 것입니다.

x = x.replace(/&/g, '&')
     .replace(/>/g, '>')
     .replace(/</g, '&lt;')
     .replace(/\n/g, '<br>');

시도해 보기:

$(someElem).html('this<br> has<br> newlines);

저는 그와 함께 일하자고 제안하고 싶습니다.someElem요소를 대체할 때 직접적으로.html()문자열 내의 다른 HTML 태그도 대체할 것입니다.

내 기능은 다음과 같습니다.

function nl2br(el) {
  var lines = $(el).text().split(/\n/);
  $(el).empty();
  for (var i = 0 ; i < lines.length ; i++) {
    if (i > 0) $(el).append('<br>');
    $(el).append(document.createTextNode(lines[i]));
  }
  return el;
}

전화번호:

someElem = nl2br(someElem);

CSS 화이트스페이스 속성을 사용하는 것이 아마도 가장 좋은 해결책일 것입니다.Firebug 또는 Chrome Developer Tools를 사용하여 추가 패딩의 출처를 확인합니다.

저는 .text() 함수 대신 jquery.html() 함수를 사용할 때 작동합니다.그런 다음 줄 바꿈에 대해 <br/>을 추가할 수 있습니다.

var msg = someString + "<br/>" + anotherString;
$(elem).html(msg);

언급URL : https://stackoverflow.com/questions/4535888/jquery-text-and-newlines