2

我制作了一个代码，应该突出显示搜索到的字符串，但它不起作用。
这是代码： 

<body>

  <div>div is here</div>
   <div id="divid">

    <div>this is a div 1</div>
    <div> this is a div 2</div>
    <div> this is a div3</div>

  </div>

  <div> another div is here</div>
  </body>

这是一个javascript代码。 

  function checkit(){

var hlWord = "div";
        var nregex = new RegExp(hlWord,"gi");
        var div = document.getElementById("divid").getElementsByTagName('div');

        for(var i=0; i <= div.length; i++){

            var div1 = div[i].innerHTML;

            var rword = div1.replace(nregex,"<b>"+hlWord+"</b>");
            div1.innerHTML = rword;

        }


  }
4

3 回答 3

5

您的代码中存在初学者错误。让我纠正他们：

  function checkit(){

    var hlWord = "div";                  //Define string that will be emphasized by <b> tag
    var nregex = new RegExp(hlWord,"gi");//Create global, case-insensitive regexp
    var div = document.getElementById("divid").getElementsByTagName('div');  //Get element collection of divs in div#divid

    for(var i=0; i < div.length; i++){  //Loop through my element collection

        var div1 = div[i].innerHTML;    //Get the innerHTML of on of the divs

        var rword = div1.replace(nregex,"<b>"+hlWord+"</b>");  //Surround my string with <b>
        div[i].innerHTML = rword;  //Change the innerHTML back

    }

  }

  1. 你使用了这个for条件：i<=div.length. 这是错误的。不要忘记，我们从 0 开始计数：[0, 1, 2, 3].length = 4。此类数组的最后一个元素的索引为 3。这[]是一个数组文字。

  2. 错误地，您分配了div1.innerHTML. div1是一个字符串。您要更改的元素是div[i].

我也做了一个JSFiddle！

于 2013-04-17T12:03:24.110 回答
1

除了其他问题外，您的代码问题将是嵌套div元素将被破坏。如果要突出显示单词“div”，则应该使用某种递归。

这是这样一个功能：

function highLight(term,root){
    var allDiv = root.querySelectorAll('div'),
        replacer = function(a){return '<span class="highlight">'+a+'</span>'};
    for (var i=0; i<allDiv.length; i+=1){
        if (allDiv[i].querySelectorAll('div').length){
            highLight(term, allDiv[i]);
        } else {
          var re = RegExp('('+term+')','gi');
          allDiv[i].innerHTML = allDiv[i].innerHTML.replace(re,replacer);
        }
    }
}

这是一个jsfiddle玩弄它

更高级的 jsfiddle

于 2013-04-17T12:46:18.187 回答
0

你有几个错误：你去：

http://jsfiddle.net/55U6j/1/

function checkit(){

var hlWord = "div";
        var nregex = new RegExp(hlWord,"gi");
        var divs = document.getElementById("divid").getElementsByTagName('div');

        for(var i=0; i < divs.length; i++){

            var div = divs[i];
            var html =  div.innerHTML;

            var rword = html.replace(nregex,"<b>"+hlWord+"</b>");
            div.innerHTML = rword;

        }


  }
于 2013-04-17T12:08:32.630 回答