dd90p dd90p - 19 days ago 13
HTML Question

How to highlight all keywords in the content rather than highlight by clicking? JSP HTML Javascript

How to change the javascript so that all the keywords can be auto highlight in the content.
Currently, the key words will be highlight when the user click the keywords.
I would like to auto highlight it.
But i do not know how to change the 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>


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

Instead of doing the highlight on the 'click' event of the keyword .. simply do it on window load itself for all the keywords meaning something like below ,

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

Comments