Javascript JQuery在链接的静态页面中搜索，突出显示找到的单词而不破坏列表

在看过这篇文章之后，我终于找到了我想要的东西。然而，搜索似乎破坏了其他HTML标记。我知道这不是为了满足我的具体要求，但我正在寻求帮助

下面是一个HTML示例：

$（'#searchfor'）.keyup（函数（）{
变量页=$（“#所有#文本”）；
var pageText=page.text（）.replace（“，”）.replace（“”）；
var searchedText=$（“#searchfor'）.val（）；
var theRegEx=new RegExp（“（“+searchedText+”），“igm”）；
var newHtml=pageText.replace（theRegEx，“$1”）；
html（newHtml）；
});
#所有文本跨度{
文字装饰：下划线；
背景颜色：黄色；
}




因此，我认为解决问题的办法是只需要获取要突出显示的锚的内容。下面是JSFIDLE：
但基本上，我在锚中创建了一个类，可以搜索，而不是在all_文本中获得所有可搜索的内容：

Html
JS
$（'#searchfor'）.keyup（函数（）{
var$page=$（“#all_text.searchable”）；
$page.每个（功能（i，a）{
$a=$（a）
$a.html（$a.html（）.replace（//g，“”）。replace（//\/g，“”）
})
var searchedText=$（“#searchfor'）.val（）；
如果（searchedText！=“”）{
$page.每个（功能（i，a）{
$a=$（a）
var html=$a.text（）.replace（新的RegExp（“（“+searchedText+”），“$1”）
$a.html（html）
})
}
});

obs：我从span改为em，因为在html5中，当你想突出显示某些内容时，你可以使用strong或em（取决于你想要的语义）。
因为我的编辑被拒绝。不完全清楚为什么，但他的代码可以精简很多。以下是我的编辑：

因此，我认为解决问题的办法是，只需要获取要突出显示的锚的内容。下面是JSFIDLE:。基本上，我以锚定标记为目标，使用
.each（）
函数根据用户搜索的内容替换每个锚定标记中的内容




Html
JS
$（'#searchfor'）.keyup（函数（）{
var$page=$（“#全部_文本a”）；
var searchedText=$（“#searchfor'）.val（）；
$page.每个（功能（i，a）{
$a=$（a）；
$a.html（$a.html（）.replace（//g，“”）。replace（//\/g，“”）；
var html=$a.text（）.replace（新的RegExp（“（“+searchedText+”），“$1”）；
$a.html（html）；
});
});
试试类似的插件（谷歌提供一些）谢谢@MoshFeu。设法让它与您的推荐一起工作。从Mosh Feu推荐的插件没有得到维护（上次提交从2010年开始），在GitHub上禁用了问题，并且没有重新设置为原始插件（落后2个版本）。你使用它时应该非常小心。相反，请看一看。我已经编辑了你的帖子，请看一看。这是我的编辑给你的，我知道。被3/5人拒绝，2/5人批准。被拒绝的原因是：“这篇编辑偏离了帖子的初衷。即使是必须做出重大修改的编辑也应该努力维护帖子所有者的目标。”我认为它没有偏离帖子的初衷。唯一的区别是我使用了
span
而不是
em
。否则它只是你代码的精简版本。伙计，我没有看到你的编辑，我没有机会批准或拒绝它：/我对此感到抱歉。我不知道谁有权拒绝这个版本。不用担心。我只是想发布一篇文章，表明有一种替代/精简的方法来解决你的答案。
<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>

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

$('#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)
    })
  }
});

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

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

$('#searchfor').keyup(function(){
  var $page = $('#all_text a');

  var searchedText = $('#searchfor').val();

    $page.each(function(i,a){
      $a = $(a);
      $a.html($a.html().replace(/<span>/g,"").replace(/\<\/span\>/g,""));
      var html = $a.text().replace(new RegExp("("+searchedText+")", "igm"), "<span>$1</span>");
      $a.html(html);
    });
});