如何突出显示内容中的所有关键字，而不是通过单击突出显示？JSP HTML Javascript

如何更改javascript，以便在内容中自动突出显示所有关键字。 当前，当用户单击关键字时，关键字将高亮显示。 我想自动突出显示它。 但我不知道如何更改javascript

<h3>Keywords</h3>
<ul id="keywords">
    <li><span>AC</span>  <span>Motors<span></li>
    <li><span>Adjustable</span>  <span>Speed</span>  <span>Motor</span>  <span>Drives<span></li>
</ul>

<h3>Sentences</h3>
<table style="font-size: 0.9em;">
  <tr>
    <td class="context">columbus fan & machine corp, dc industrial sales company, ac motors, dc motors, electric motor repair, electrical product servicing, cooling blowers, cooling blower filters, line/load reactors, electrical products, electric product distributors, power products, dc drives, electrical enclosures, electrical generators, electrical heaters, electric pumps, proximity switches, electrical transformers, electrical tachometers</td>
  </tr>
  <tr>

    <td class="context">Columbus Fan & Machine corp is a <span class="featured-word">manunfacturer</span> of top quality Cooling Blowers and Filters along with other related motor accessories for all makes of AC & DC Motors</td>
        </tr>
        </table>

---

而不是在关键字的“单击”事件上突出显示。。只需在window load上加载所有关键字，如下所示

$(document).ready(function() {
  var context = document.querySelectorAll('.context'),
    keywords = document.querySelectorAll('ul#keywords li span');

  Array.from(keywords).forEach(function(entry) {
    for (var i = 0; i < context.length; i++) {
      var item = context[i],
        text = item.innerHTML,
        featuredWords = item.querySelectorAll('.featured-word'),
        words = Array.prototype.slice.call(featuredWords, 0).map(function(node) {
          return node.textContent;
        })

      , regex = new RegExp('\\b(' + entry.innerHTML + ')\\b', 'ig');
      text = text.replace(regex, '<span class="highlight">$1</span>');

        // put the bolded words back
      words.forEach(function(word) {
        text = text.replace(word, '<span class="featured-word">' + word + '</span>');
      });

      item.innerHTML = text;
    }
  }, false);
});

$（文档）.ready（函数（）{
var context=document.querySelectorAll（'.context'），
关键词=document.queryselectoral（'ul#keywords li span'）；
Array.from（关键字）.forEach（函数（条目）{
for（var i=0；i

---

仅在JSFIDLE中使用，它无法工作。你能带我去看JSFiddle吗？？谢谢你的链接。。请参考HTML中的更改。如果答案对你有效，请接受答案

  .highlight {
        background-color: yellow;
    }
    .featured-word {
        color: red;
        font-weight: bold;
    }

$(document).ready(function() {
  var context = document.querySelectorAll('.context'),
    keywords = document.querySelectorAll('ul#keywords li span');

  Array.from(keywords).forEach(function(entry) {
    for (var i = 0; i < context.length; i++) {
      var item = context[i],
        text = item.innerHTML,
        featuredWords = item.querySelectorAll('.featured-word'),
        words = Array.prototype.slice.call(featuredWords, 0).map(function(node) {
          return node.textContent;
        })

      , regex = new RegExp('\\b(' + entry.innerHTML + ')\\b', 'ig');
      text = text.replace(regex, '<span class="highlight">$1</span>');

        // put the bolded words back
      words.forEach(function(word) {
        text = text.replace(word, '<span class="featured-word">' + word + '</span>');
      });

      item.innerHTML = text;
    }
  }, false);
});