Question

下面的代码基于此示例中提供的示例： StackOverflow Question

我对JS不好，但想调整此代码以突出显示不仅位于网站上的数字，而是突出显示活动标签中任意位置处的特定文本，更改字体颜色或突出显示文本。我该怎么办？

感谢任何帮助，我是JS的新手，有点迷路。谢谢， A2k

编辑：为了澄清，我想在活动选项卡中的任何位置突出显示Apple，Banana等词，而不必在表格或td中。这意味着单词也可以出现在文本段落，标签，输入字段等中。

highlightText.js

// keyword to highlight
var keywordArray = ["apple","banana","orange"];

keywordArray.forEach(function(v){
  var num = "(" + v + ")";

  // Select the '<td>' that contains the number we are looking for
  var td = $('td.col-question:contains('+num+')');

  // Make sure that this number exists
  if(td.length > 0){

    // Now that we have it we need to single out the number and replace it
    var span = td.html().replace(num,'<span class="highlight-num">'+num+'</span>');
    var n = td.html(span);
  }
    // Now instead of '(1000)' we have
    // '<span class="highlight-num">(1000)</span>'
    // We will color it in the css file
});

highlight.css

span.highlight-num{
  background-color: rgb(100, 255, 71);
}

Answer 1

您的问题在于：

var num = "(" + v + ")";

通过此操作，您正在检查水果(apple)，(banana)或(orange)是否在表中。相反，您可以删除它以检查表中是否包含apple，banana或orange。

如果关键字周围带有跨度以突出显示关键字，则可以使用正则表达式替换关键字。

这确实有其缺点，因为它不能与文本输入一起正常使用，因为标记不会被呈现为HTML。

请参见下面的工作示例：

$(function() {
  var keywordArray = ["apple", "banana", "orange"];
  var body = $('body');
  var innerHTML = body.html()
  keywordArray.forEach(function(num) { // change function(v) to function(num)
    innerHTML = innerHTML.replace(new RegExp(num, 'g'), '<span class="highlight-num">' + num + '</span>');
  });

  body.html(innerHTML);

});

span.highlight-num {
  background-color: rgb(100, 255, 71);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <p>The big apple is big</p>
  <em>The orange <strong>orange</strong> is orange</em>
  <br />
  <span>The green grape is green</span>
  <h4>The banana is a banana</h4>
</body>

JS Chrome插件-在当前活动的标签中查找文本

1 个答案: