如何使用javascript查找并突出显示某些文本中标记的文本？

Question

开发了一个脚本，用于突出显示链接到另一个html页面的文本。

 <p>Click <span class="f1"><a href="#myModal" data-reveal-id="myModal">here</a>/span></p>

    <div class="leftspread">
    <p class="table-caption"><span>CHAPTER 4: Vocabulary Checklist</span></p>
    <div id="myModal" class="reveal-modal" ><span style="float:right;"><a class="close-reveal-modal" style="font-size:1.5em;">&#215;</a></span> 
    <div class="voca-head tspace"><strong>CHAPTER 4: Vocabulary Checklist</strong></div>
    <div class="voca">&#x00A0;</div>
    <div class="voca"><a href="page012.xhtml#pg012">business process re-engineering (n)</a></div>
    <div class="voca"><a href="page012.xhtml#pg012">business process</a></div>
    <div class="voca"><a href="page016.xhtml#pg016">business-to-employee (B2E) (n)</a></div>
    <div class="voca"><a href="page033.xhtml#pg033">corporate social responsibility (n)</a></div>
    <div class="voca"><a href="page022.xhtml#pg022">discretion (n), discreet (adj), discretionary (adj)</a></div>
    </div>
    </div>

<script type="text/javascript">
$(document).ready(function(){
    $(document).scrollTop(0);
});
radioBtn();
</script>

关键字列表（以上leftspread编码）将在点击文字here

后显示为弹出窗口

在 page012.xhtml ：

中

CSS：

.highlight{ background:yellow; }

HTML：

<p><span class="glossary">business process re-engineering</span></span></p>

<p><span class="glossary">business process</span></span></p>

脚本：

    <script>    
    $(document).ready(function(){
    //alert( window.location.href.split("#")[1] );
    var currentURLString = window.location.href.split("#")[1];
    //currentURLString = currentURLString

    //alert(currentURLString)

    if(currentURLString != undefined){
    $(".glossary").addClass('highlight');       
    }

    //alert(currentURLString);


    });
    </script>

这在我们的最后工作正常，但所有文本都在任何定义<span class="glossary">时突出显示为黄色，但是只点击一个单词。

但是我必须找到一个特定的单词，从锚标签中点击一个单词。 有些文字编码如下。

<span class="glossary">business pro</span><span class="ls30 lm42 glossary">cess re&#57394;eng</span></span>

它（仅点击文本）应该被忽略，无论是围绕搜索词＆amp;突出显示它的编码没有任何类。

<span class="ls1 lm41">ation of <span class="f1 s2">business pro</span><span class="ls30 lm42">cess re&#57394;eng</span></span><span class="ls31 lm43">ineering </span></span>

任何人都可以修复并解决此问题吗？ 这将非常有帮助和赞赏。

Answer 1

为什么在片段#pg012中使用页码<a href="page012.xhtml#pg012">？
您可以在另一页的片段中使用您想要突出显示#business process re-engineering (n)的整个文本。

<a href="page012.html#business process re-engineering (n)">business process re-engineering (n)</a>

JS

$(document).ready(function () {
  var currentURLString = window.location.href.split("#")[1];
  $("#page012:contains('" + currentURLString + "')").html(function (_, html) {
    var regex = new RegExp("/" + currentURLString + "/g");

    var re = new RegExp(RegExp.escape(currentURLString), "g");
    return html.replace(re, '<span class="highlight">' + currentURLString + '</span>')
  });

});

RegExp.escape = function (text) {
  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
};

我创建了一个类似的plunk。我希望这有帮助!!