javascript - JQuery 在链接的静态页面中搜索，并在不破坏列表的情况下突出显示找到的单词

Question

之前看过这篇文章后，JQuery search in static HTML page with highlighting of found word ，我终于找到了我要找的东西。但是，搜索似乎会破坏其他 HTML 标记。我知道它不是为满足我的确切要求而设计的，但我正在寻求一些帮助。

这是一个 HTML 示例:

$('#searchfor').keyup(function(){
  var page = $('#all_text');
  var pageText = page.text().replace("<span>","").replace("</span>");
  var searchedText = $('#searchfor').val();
  var theRegEx = new RegExp("("+searchedText+")", "igm");    
  var newHtml = pageText.replace(theRegEx ,"<span>$1</span>");
  page.html(newHtml);
});

#all_text span {
  text-decoration: underline;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<input type="text" id="searchfor" />
<ul id="all_text">
  <li><a href="/somewhere">Somewhere</a></li>
  <li><a href="/somewhere-else">Over there</a></li>
</ul>

在搜索框中输入后，它会删除所有 <li>标签和所有 <a>标签。我对 Javascript 或 Jquery 不是很有信心，所以我无法自己解决这个问题。它需要保留列表和超链接，但只在可见文本中搜索(即不在 href 字段中搜索)。

非常感谢所有输入。

Answer 1

所以我认为你的问题的解决方案是你只需要获取你想要突出显示的 anchor 的内容。以下是 jsfiddle:https://jsfiddle.net/kimaescobar/k83j7Lqv/1/但基本上我在可搜索的 anchor 中创建了一个类，而不是在 all_text 中获取所有可搜索的类:

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<input type="text" id="searchfor" />
<ul id="all_text">
  <li><a class="searchable" href="/somewhere">Somewhere</a></li>
  <li><a class="searchable" href="/somewhere-else">Over there</a></li>
</ul>

CSS

#all_text em {
  text-decoration: underline;
  background-color: yellow;
}

JS

$('#searchfor').keyup(function(){
  var $page = $('#all_text .searchable');
  $page.each(function(i,a){
        $a = $(a)
      $a.html($a.html().replace(/<em>/g,"").replace(/\<\/em\>/g,""))
    })
  var searchedText = $('#searchfor').val();
  if(searchedText != ""){
    $page.each(function(i,a){
      $a = $(a)
      var html = $a.text().replace(new RegExp("("+searchedText+")", "igm"), "<em>$1</em>")
      $a.html(html)
    })
  }
});

obs:我从 span 更改为 em，因为在 html5 中语义上当你想突出显示你使用 strong 或 em 的东西时(取决于你想要的语义)。