javascript - 正则表达式查找html标签

Question

我使用 jQuery 编写了一个简单的“搜索功能”。您在框中输入一些文本，它会返回您搜索的页面上的文本。但是，如果我输入单词“the”，搜索结果将返回 <thead></thead>突出显示“the”。我怎样才能让它找不到像这样的 html 标签？当我输入“编辑”时，会发生类似的情况，它返回一个名为“编辑...”的图像，该图像消失并突出显示“编辑”。

我尝试了一些不同的方法，以元素开头的行，因为我认为这就是问题所在。

        function highliter(word, id){
            $('*').removeClass('highlight');
            var rgxp = new RegExp(word, 'g');
            var repl = '<span class="highlight">' + word + '</span>';
            var element = document.getElementById(id);
            element.innerHTML = element.innerHTML.replace(/word/g, repl);
            // element.innerHTML = element.innerHTML.replace(rgxp, repl);

            $('html, body').scrollTop($(".highlight").offset().top - 126);

Answer 1

嗯。老实说，我对这个解决方案并不是 100% 满意，但它确实完成了工作，希望能给您一些想法。

它分两步进行:

• 首先处理包含目标单词的所有元素的文本节点，并将其替换为特殊标记(这应该不太可能在源代码中的其他任何地方找到 - 这是我不太满意)
• 然后使用正则表达式和 html() 方法将我们的标记替换为最终的替换模式(这部分与您原来的非常相似)

function highliter(word, id) {
  var el = $('#' + id);
  var repl = '<span class="highlight">' + word + '</span>';
  
  $('*').removeClass('highlight');
  recursiveMarker(word, el);
  el.html(el.html().replace(/\[MY_MARKUP\]/g, repl));
}

function recursiveMarker(word, parent) {
  var rgxp = new RegExp(word, 'g');
  var repl = '[MY_MARKUP]';

  parent.find(':contains(' + word + ')').contents().each(function(key, el) {
    if(this.nodeType == 3) {
      el.data = el.data.replace(rgxp, repl);
    }
    else {
      recursiveMarker(word, $(el));
    }
  });
}

highliter('div', 'container');

.highlight {
  background-color:#ffff00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div>This is a div <span id="div">with a span whose id is 'div'</span></div>
  <div>This is another div</div>
</div>