Question

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

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

        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

好。说实话，我对这个解决方案并不是百分之百满意，但它确实能完成这项工作并希望能给你一些想法。

它分两步进行：

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

＆＃13;

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');

＆＃13;

.highlight {
  background-color:#ffff00;
}

＆＃13;

<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>

＆＃13;

regexp找到html标签

1 个答案: