특정 단어를 하이퍼 링크로 바꾸는 크롬 확장 프로그램을 만드는 방법은 무엇입니까?

Question

페이지에서 특정 단어를 찾아서 하이퍼 링크로 변환하는 크롬 확장 프로그램을 만들려고합니다. 예를 들어, 어딘가에 "검색"이라는 단어가있는 웹 사이트를 방문하면 해당 단어가 클릭 할 수있는 링크로 바뀝니다 (단어는 계속 표시되지만 어쩌면 다른 색이나 다른 것으로 표시됩니다). "www.google.com"으로 리디렉션됩니다.

단어를 찾아 다른 단어로 변경하는 코드가 있지만 하이퍼 링크로 변경하는 방법을 모르겠습니다. 내가 가지고있는 JavaScript는 다음과 같습니다.

walk(document.body);  
function walk(node) 
{  
    var child, next;  
    switch (node.nodeType) 
    { 
     case 1: 
     case 9: 
     case 11: 
      child = node.firstChild; 
      while (child) 
      { 
       next = child.nextSibling; 
       walk(child); 
       child = next; 
      } 
      break;  
     case 3: 
      handleText(node); 
      break; 
    } 
} 

function handleText(textNode) 
{ 
    var v = textNode.nodeValue;  
    v = v.replace(/\bsearch\b/g, (str.link("https://www.google.com"))); 
    v = v.replace(/\bsearch\b/g, <a href="http://www.google.com">asdf</a>); 

    textNode.nodeValue = v; 
} 

누군가가 도움을 줄 수 있습니까?

Answer 1

HTML이 사용자가 통과하는 DOM으로 파싱됩니다. 실제로 DOM을 대체하는 것이 아니라 텍스트 노드를 구문 분석되지 않은 HTML로 바꾸면 작동하지 않습니다. 대신 텍스트 노드를 원하는 URL과 텍스트가있는 <a> 노드로 바꿔야합니다.

Answer 2

텍스트 노드를 구문 분석 된 HTML 요소로 바꿔야합니다.

변경 뭔가

textNode.nodeValue = v; 

또한

var htmlParser = document.createElement('div'); 
    htmlParser.innerHTML = v; 
    // replace text node with parsed nodes 
    var newNodes = htmlParser.childNodes; 
    while (newNodes.length) { 
     textNode.parentNode.insertBefore(newNodes[0], textNode); 
    } 
    textNode.parentNode.removeChild(textNode); 

처럼, 앵커 (node.tagName === 'A') DOM을 통과하거나 끝낼 수 있었다 동안 무시해야합니다 기존 앵커 내부의 텍스트를 대체합니다.