Wie können Sie alle Keywords im Content markieren und nicht durch Klicken markieren? JSP HTML Javascript

Question

Wie man das Javascript ändert, damit alle Schlüsselwörter im Inhalt automatisch hervorgehoben werden können. Derzeit werden die Schlüsselwörter hervorgehoben, wenn der Benutzer auf die Schlüsselwörter klickt. Ich möchte es automatisch hervorheben. Aber ich weiß nicht, wie man das Javascript ändert.

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

javascript:

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

    keywords.addEventListener('click', function (event) { 
     var target = event.target; 
     for(var i = 0; i < context.length; i++) { 
      var item = context[i] 
       , text = item.textContent 
       , featuredWords = item.querySelectorAll('.featured-word') 
       , words = Array.prototype.slice.call(featuredWords, 0).map(function(node) { 
       return node.textContent; 
       }) 
       , regex = new RegExp('\\b(' + target.textContent + ')\\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); 
}); 

css:

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

the code link in JSFiddle

Answer 1

Anstatt das Highlight auf dem 'Klick' Ereignis des Keyword tun .. einfach tun es auf Fenster lädt sich für alle Schlüsselwörter, die etwas wie unten,

0 bedeuten

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

JSfiddle Link