Javascript에서 textNode를 HTML 텍스트로 바꾸시겠습니까?

나는 GitHub (https://github.com/cowboy/javascript-linkify)의 Linkify 프로젝트로 이동하여 텍스트에 떠있는 URL과 도메인을 찾고 "연결"했습니다.Javascript에서 textNode를 HTML 텍스트로 바꾸시겠습니까?

정말 멋지다! 그것은 텍스트에서 완전히 작동합니다!

그러나 Linkify 할 텍스트가있는 textNode에서 어떻게 작동하게 할 지 잘 모르겠습니다.

textNode는 textContent 만 가지고 있다는 것을 알고 있습니다. 모든 텍스트입니다. 이 Linkify 함수는 HTML을 텍스트로 반환하므로 textNode를 가져 와서 Linkify 출력으로 HTML을 "다시 작성"할 수 있습니까? 해당 요소의 같은 linkified 텍스트는 다음 설정 http://jsfiddle.net/AMhRK/9/

function repl(node) { 

var nodes=node.childNodes; 
for (var i=0, m=nodes.length; i<m; i++) 
{ 
    var n=nodes[i]; 
    if (n.nodeType==n.TEXT_NODE) 
    { 
     // do some swappy text to html here? 
     n.textContent = linkify(n.textContent); 
    } 
    else 
    { 
     repl(n); 
    } 
} 
}

출처

2013-03-21 Jippers

예제 코드가 너무 복잡하고 너무 많은데 어디서부터 시작해야할지 모르겠다! 조금 닦아서 정상적인 예제를 가지고 textNode로 원하는 것을 하나 만들 수 있습니까? –

http://jsfiddle.net/AMhRK/4/ – Ryan

@ryan 가깝지만 이미 올바르게 하이퍼 링크 된 URL을 망가 뜨리는 것을 볼 수 있습니다. – Jippers

당신은 스팬과 같은 HTML 요소로 textNode을 교체해야하며, :

여기 JSFiddle에 함께 놀았 던 innerHTML. textNode입니다 - n

$(n).replaceWith('Some text with <b>html</b> support');

var replacementNode = document.createElement('span'); 
replacementNode.innerHTML = linkify(n.textContent); 
n.parentNode.insertBefore(replacementNode, n); 
n.parentNode.removeChild(n);

출처

2013-03-21 17:11:01

텍스트 노드에 "연결 해제 된"요소가 많이 포함될 수 있으므로 간단하지 않습니다. –

이것이 작동하는 것 같습니다! 윌 스콧 (Will Scott)이 추가 된 피들 포크가 있습니다 : http://jsfiddle.net/H2aHH/ – Jippers

이것은'.replaceChild()'가없는 사용자의'Selection'을 유지합니다 !! brilliant – neaumusic

는 또한 이전의 대답에 나는 (jQuery를 기반으로) 더 짧은 방법을 제안한다.

출처

2017-02-02 17:11:35 IStranger

'replaceWith()'는 최신 브라우저 (Chrome 및 Firefox의 경우 Edge가 아래에 있음)에서 [vanilla JavaScript] (https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith)로 사용할 수 있습니다. 개발). –

Javascript에서 textNode를 HTML 텍스트로 바꾸시겠습니까?

답변

관련 문제