HTML本体のテキストを見つけて強調表示するJavaScriptコードFIX

Question

文字列を受け取り、htmlページで強調表示するこのJavaScript関数があります。

機能基本的

<script type="text/javascript"> 

function highlight(word) { 
    var node = document.body; 
    for (node = node.firstChild; node; node = node.nextSibling) { 

     var n = node; 
     var match_pos = 0; 
     match_pos = n.nodeValue.indexOf(word); 
     var before = n.nodeValue.substr(0, match_pos);// split into a part before the match 
     var middle = n.nodeValue.substr(match_pos, word.length); // the matched word to preserve case 
     var after = document.createTextNode(n.nodeValue.substr(match_pos + word.length));// and the part after the match  
     var highlight_span = document.createElement("span");// create a span in the middle 
     highlight_span.style.backgroundColor = "yellow"; 
     highlight_span.appendChild(document.createTextNode(middle));// insert word as textNode in new span 
     n.nodeValue = before; // Turn node data into before 
     n.parentNode.insertBefore(after, n.nextSibling); // insert after 
     n.parentNode.insertBefore(highlight_span, n.nextSibling); // insert new span 
     highlights.push(highlight_span); 
     highlight_span.id = "highlight_span" + highlights.length; 
     node = node.nextSibling; // Advance to next node or we get stuck in a loop because we created a span (child) 


    } 
} 

</script> 

、引数が強調表示されていないとして、私は関数に与える文：私は基本的には初期値の文字列ではCtrl-Fをシミュレートしようとしています。私はそれが肯定的であることを知っています。

これは、次にHTMLページ

@Html.Action("GetHtmlPage", "Upload", new { path = Model.documentPath }) 

をロードし、これがあなたのループに問題がありました

@{ 
    var str = Model.sentence["sentence"].AsString; 
    <script>highlight(@str)</script> 
} 

Answer 1

目的球を呼び出します。このようなものはもっとうまくいくでしょう。何が起こった

var highlights = [] 
 
function searchElement(elem, word){ 
 
    var children = Array.prototype.slice.call(elem.childNodes); 
 
    for(var i=0; i<children.length; i++){ 
 
    if(children[i].nodeType == Node.TEXT_NODE){ 
 
     var n = children[i]; 
 
     var match_pos = n.nodeValue.indexOf(word); 
 
     if(match_pos == -1){ 
 
      continue; 
 
     } 
 
     var before = n.nodeValue.substr(0, match_pos);// split into a part before the match 
 
     var middle = n.nodeValue.substr(match_pos, word.length); // the matched word to preserve case 
 
     var after = document.createTextNode(n.nodeValue.substr(match_pos + word.length));// and the part after the match  
 
     var highlight_span = document.createElement("span");// create a span in the middle 
 
     highlight_span.style.backgroundColor = "yellow"; 
 
     highlight_span.appendChild(document.createTextNode(middle));// insert word as textNode in new span 
 
     n.nodeValue = before; // Turn node data into before 
 
     n.parentNode.insertBefore(after, n.nextSibling); // insert after 
 
     n.parentNode.insertBefore(highlight_span, n.nextSibling); // insert new span 
 
     highlights.push(highlight_span); 
 
     highlight_span.id = "highlight_span" + highlights.length; 
 
    }else if(children[i].childNodes.length){ 
 
     searchElement(children[i], word); 
 
    } 
 
    } 
 
} 
 
function highlight(word) { 
 
    searchElement(document.body, word) 
 
} 
 

 
highlight("Even more test");

test 
 
<div> 
 
    More test 
 
    
 
    <span>Even more test</span> 
 
</div>