jQuery는 줄 바꿈을 br로 변환 (nl2br 상당)

jQuery가 일부 텍스트 영역 콘텐츠를 가져 와서 li에 삽입하도록하고 있습니다.

줄 바꿈을 시각적으로 유지하고 싶습니다.

이 작업을 수행하는 정말 간단한 방법이 있어야합니다 ...

데모 : http://so.devilmaycode.it/jquery-convert-line-breaks-to-br-nl2br-equivalent

function nl2br (str, is_xhtml) {   
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';    
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}

• http://phpjs.org/functions/nl2br:480

간단히 할 수 있습니다.

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

이것을 코드에 넣으십시오 (가급적 일반 js 함수 라이브러리에 있음).

String.prototype.nl2br = function()
{
    return this.replace(/\n/g, "<br />");
}

용법:

var myString = "test\ntest2";

myString.nl2br();

문자열 프로토 타입 함수를 생성하면 모든 문자열에서이를 사용할 수 있습니다.

내용 을 변경하는 대신 렌더링 을 변경하는 정신으로 다음 CSS 는 각 줄 바꿈을 다음과 같이 작동합니다 .<br>

white-space: pre;
white-space: pre-line;

왜 두 가지 규칙 : pre-line개행에만 영향을 미칩니다 (단서 @KevinPauli에 감사드립니다). IE6-7 및 기타 오래된 브라우저 pre는 nowrap여러 공간을 포함 하고 렌더링 하는 더 극단적으로 돌아갑니다 . mozilla 및 css-tricks의 이러한 설정 및 기타 설정 ( pre-wrap) 에 대한 자세한 내용은 @Sablefoste에게 감사드립니다.

나는 일반적으로 질문에 대답 하기보다는 두 번째 추측에 대한 편견을 싫어하지만 ,이 경우 줄 바꿈을 <br>마크 업으로 바꾸면 씻지 않은 사용자 입력 으로 주입 공격에 대한 취약성이 증가 할 수 있습니다 . 문자 그대로 질문이 의미하는 변경 .text()전화를 발견 할 때마다 밝은 빨간색 선을 넘고 .html()있습니다. (이 점을 강조해 주신 @AlexS에게 감사드립니다.) 당시 보안 위험을 배제하더라도 향후 변경 사항으로 인해 무의식적으로 발생할 수 있습니다. 대신이 CSS를 사용하면 safer를 사용하여 마크 업없이 하드 줄 바꿈을 얻을 수 있습니다 .text().

해결책

이 코드 사용

jQuery.nl2br = function(varTest){
  return varTest.replace(/(\r\n|\n\r|\r|\n)/g, "<br>");
};

이 JavaScript 함수는 교체를 처리하기 위해 삽입 또는 바꾸기를 사용할지 여부를 고려합니다.

(HTML 줄 바꿈 삽입 또는 바꾸기)

/**
 * This function is same as PHP's nl2br() with default parameters.
 *
 * @param {string} str Input text
 * @param {boolean} replaceMode Use replace instead of insert
 * @param {boolean} isXhtml Use XHTML 
 * @return {string} Filtered text
 */
function nl2br (str, replaceMode, isXhtml) {

  var breakTag = (isXhtml) ? '<br />' : '<br>';
  var replaceStr = (replaceMode) ? '$1'+ breakTag : '$1'+ breakTag +'$2';
  return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, replaceStr);
}

데모-JSFiddle

JavaScript nl2br 및 br2nl 함수

이를 위해 약간의 jQuery 확장을 작성했습니다.

$.fn.nl2brText = function (sText) {
    var bReturnValue = 'undefined' == typeof sText;
    if(bReturnValue) {
        sText = $('<pre>').html(this.html().replace(/<br[^>]*>/i, '\n')).text();
    }
    var aElms = [];
    sText.split(/\r\n|\r|\n/).forEach(function(sSubstring) {
        if(aElms.length) {
            aElms.push(document.createElement('br'));
        }
        aElms.push(document.createTextNode(sSubstring));
    });
    var $aElms = $(aElms);
    if(bReturnValue) {
        return $aElms;
    }
    return this.empty().append($aElms);
};

@Luca Filosofi의 대답을 개선하기 위해

필요한 경우,이 정규식의 시작 절을로 변경하면 /([^>[\s]?\r\n]?)줄 바꿈이 바로 뒤에 오는 태그 대신 태그와 약간의 공백 뒤에 줄 바꿈이 오는 경우도 포함됩니다.

줄 바꿈을 유지하면서 DOM의 텍스트 영역에서 텍스트를 삽입하는 또 다른 방법 은 노드 및 해당 하위 항목 의 렌더링 된 텍스트 콘텐츠 를 나타내는 Node.innerText 속성 을 사용하는 것 입니다.

게터로서 사용자가 커서로 요소의 내용을 강조 표시 한 다음 클립 보드에 복사하면 사용자가 얻을 수있는 텍스트와 비슷합니다.

이 속성은 2016 년에 표준이되었으며 최신 브라우저에서 잘 지원됩니다. 사용할 수 있습니까 :이 답변을 게시했을 때 97 % 글로벌 범위.