jQuery 선분절을 br(nl2br 등가)로 변환

jQuery 선분절을 br(nl2br 등가)로 변환

jQuery에게 텍스트 영역 내용을 가져와서 annli에 삽입하도록 하고 있습니다.

저는 그것이 시각적으로 줄이 끊기는 것을 유지하기를 원합니다.

정말 간단한 방법이 있을 겁니다

데모: 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>");

콘텐츠를 변경하는 대신 렌더링을 변경하는 정신으로, 다음 CSS는 각 새 줄을 의 동작처럼 만듭니다.

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

두 가지 규칙이 있는 이유:pre-line새로운 줄에만 영향을 미칩니다(단호해 주셔서 감사합니다, @KevinPauli).IE6-7 및 기타 오래된 브라우저는 더 극단적인 수준으로 돌아갑니다.pre이 외에도 다음을 포함합니다.nowrap여러 공간을 렌더링합니다.이러한 설정 및 기타 설정에 대한 자세한 내용(pre-wrap모질라와 CSS-tricks에서 (고마워 @Sablefoste).

저는 일반적으로 질문에 대답하기 보다는 질문을 다시 추측하는 S.O.의 선호를 싫어하지만, 이 경우 새로운 선을 다음으로 대체합니다.<br>마크업은 씻지 않은 사용자 입력으로 인젝션 공격에 대한 취약성을 높일 수 있습니다.당신은 자신이 변화하는 것을 발견할 때마다 밝은 빨간 선을 넘고 있습니다..text()로의 전화..html()문자 그대로 질문을 해야 한다는 것을 의미합니다. (이 점을 강조해 주셔서 @AlexS 감사합니다.)당시 보안 위험을 배제하더라도 미래의 변화가 자신도 모르게 보안 위험을 도입할 수 있습니다.대신에, 이 CSS는 안전한 것을 사용하여 마크업 없이 하드 라인 브레이크를 얻을 수 있게 해줍니다..text().

코드에 입력합니다(가능한 일반 js 함수 라이브러리에 입력).

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

용도:

var myString = "test\ntest2";

myString.nl2br();

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

해결책

이 코드 사용

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

이 자바스크립트 함수는 스왑 처리를 위해 insert를 사용할지 아니면 replace를 사용할지를 고려합니다.

(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

자바스크립트 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);
};

@루카 필로소피의 인정된 답변을 개선하기 위해,

필요한 경우, 이 정규 표현식의 시작 절을 다음으로 변경합니다./([^>[\s]?\r\n]?)또한 새 줄이 태그와 공백 뒤에 오는 경우를 무시합니다. 태그만 바로 뒤에 새 줄이 오는 대신.

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

게터는 요소의 내용을 커서로 강조한 다음 클립보드에 복사할 경우 사용자가 얻을 텍스트의 근사치입니다.

이 속성은 2016년에 표준이 되었고 현대 브라우저에서 잘 지원됩니다.사용할 수 있나요: 이 답변을 게시했을 때 97%의 전세계 보도입니다.

언급URL : https://stackoverflow.com/questions/2919337/jquery-convert-line-breaks-to-br-nl2br-equivalent