javascript - 仅突出显示 HTML 标记内的关键字，而不是当关键字构成另一个单词的一部分时突出显示

Question

It works fine as shown in the first picture

The problem appears as seen in the second picture when the keyword is misspelled

问题是我不希望该单词在构成另一个单词的一部分时突出显示。问题如图 2 所示，其中关键字“online”被错误地拼写为“onlinee”，但“onlinee”中的“online”一词仍然突出显示。谁能帮我解决这个问题吗？

var elementId = 'colouredText';
var text = 'online';

var eee = document.getElementById(elementId).outerHTML;

var tags = [];
var tagLocations = [];
var htmlTagRegEx = /<\/?\w+((\s+\w+(\s*=\s*(?:\".*?"|'.*?'|[^'\">\s]+))?)+\s*|\s*)\/?>/gi;


//Strip the tags from the elementHtml and keep track of them

var htmlTg = eee.match(htmlTagRegEx);
console.log(htmlTg);
for (var iu = 0; iu < htmlTg.length; iu++) {
  tagLocations[tagLocations.length] = eee.search(htmlTg[iu]);
  tags[tags.length] = htmlTg[iu];

  eee = eee.replace(htmlTg[iu], '');

}
var textLocationn = eee.search(text);



if (textLocationn) {
  //Add the highlight
  var highlightHTMLStart = "<span class='red'>";
  var highlightHTMLEnd = "</span>";
  eee = eee.replace(text, highlightHTMLStart + text + highlightHTMLEnd);

  //plug back in the HTML tags
  var textEndLocationn = textLocationn + text.length;

  for (var r = (tagLocations.length - 1); r >= 0; r--) {
    var locationn = tagLocations[r];
    if (locationn > textEndLocationn) {
      locationn += highlightHTMLStart.length + highlightHTMLEnd.length;
    } else if (locationn > textLocationn) {
      locationn += highlightHTMLStart.length;
    }
    eee = eee.substring(0, locationn) + tags[r] + eee.substring(locationn);
  }

}

//Update the innerHTML of the element
document.getElementById(elementId).outerHTML = eee;

.green {
  color: green;
}

.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h1>This is a green text, and here a red text</h1>

<ul id="colouredText">
  <li class="gold-text">around 560,000 onlinee tunes, available as free sheet music or midi sound files, at this site alone</li>
  <li>traditional music from medieval &amp; renaissance times up to the present day</li>
  <li>plenty of free software (Windows, Mac, Linux, mobile, ...) to transfer abc into scores or midi sound files</li>
</ul>

Answer 1

可能是这样的:

function search() {
  var input = document.querySelector('input');
  if (!input.value) return;
  var element = document.querySelector('ul');
  var regex = new RegExp('\\b' + input.value + '\\b(?!>)', 'g');
  var match = element.innerHTML.match(regex);
  if (!match) return;
  element.innerHTML = element.innerHTML.replace(regex, '<span class="red">' + input.value + '</span>');
  input.value = match.length + ' matches';
  input.disabled = true;
}

.red {
  color: red;
}

<input value="online">
<button onclick="search()">Mark</button>

<ul>
  <li>around 560,000 onlinee tunes, available as free sheet music or midi sound files, at this site alone</li>
  <li>online oonline online online</li>
  <li>traditional music from medieval &amp; renaissance times up to the present day</li>
  <li>plenty of free software (Windows, Mac, Linux, mobile, ...) to transfer abc into scores or midi sound files</li>
</ul>