highlight key word with regex

by Shree Khanal

HTML

<p class="sentences">this is sample text. This is sample. hey this is sample. without key word.</p>
<div id='keyword'>This</div>

CSS

.highlight {
  background-color: lightblue;
}

JavaScript

var sentences = document.querySelector('.sentences');
var keywords = document.querySelector('#keyword');
keywords.addEventListener('click', function(event) {
  var target = event.target;
  var text = sentences.textContent;
  var regex = new RegExp('(' + target.textContent + ')', 'ig');
  text = text.replace(regex, '<span class="highlight">$1</span>');
  sentences.innerHTML = text;
}, false);