文章/答案/技术大牛

发布

社区首页 >问答首页 >使用纯Javascript突出显示包含其他元素的元素的textContent或innerText，该元素也基于用户的searchedWords

问使用纯Javascript突出显示包含其他元素的元素的textContent或innerText，该元素也基于用户的searchedWords
EN

Stack Overflow用户

提问于 2021-09-23 12:48:50

回答 2查看 25关注 0票数 0

如何在不影响显示文本和元素内部属性的情况下突出显示用户正在搜索的所有单词。我已经尝试了一些方法，但有一个问题，如下所述。请帮帮忙。谢谢。保持安全和健康。

<input type='text' id='search' onkeyup="highlight(this.value)">

<p id='WE1'><b>WE</b>wE & they<a href="url_With_WE_we_wE_WeOnly">them and We</a><span id="we2">we only.</span></p>

function highlight(searchedWords) {
    var p = document.getElementById("WE1");
    var words = searchedWords.trim().split(" ");
    for (var i=0; i < words.length; i++) {
        var word = words[i].trim();

        /*
        searchedWords = "We Only";
        trial#1: use replaceAll
        p.innerHTML = p.innerHTML.replaceAll(word, "<mark>" + word + "</mark>");
        Issues:
        1) replaceAll does not work in other browsers
        2) It highlights also the tag attributes containing the searchedWords
        3) It is case sensitive, it only highlights the exact match, though I've addressed this using this:
           var str = p.innerHTML;
           for (var j=0; j < words.length; j++) {
               var x = words[j].trim(), string = str.toLowerCase();
               while (string.lastIndexOf(x) > -1) {
                   str = str.substring(0, string.lastIndexOf(x)) + "<mark>" 
                       + str.substr(string.lastIndexOf(x), words[j].length) + "</mark>"
                       + str.substring(string.lastIndexOf(x) + words[j].length, str.length);
                   string = string.substring(0, string.lastIndexOf(x));
               }
            }
            p.innerHTML = str;
        4) Changing .toLowerCase() also changes the display to lower case
           var x = p.innerHTML.toLowerCase, word = word.toLowerCase;
            p.innerHTML = x.replaceAll(word, "<mark>" + word + "</mark>");

        trial#2:
        p.innerHTML = p.innerHTML.replace(new RegExp(words[i], "gi"), (match) => `<mark>${match}</mark>`);
        Issues:
        1) OK, it is NOT case sensitive, it highlights all the searchedWords and the display is OK
        2) But, it highlights also the tag attributes containing the searchedWord, anchor tags are affected

        I tried also using p.childNodes, nodeValue, textContent so that the attributes
        containing the searchedWord are not affected yet it only inserts the words
        <mark>SearchedWord</mark> and the searchedWord is not highlighted.
        */
       
    }
}

javascript

arrays

回答 2

Stack Overflow用户

发布于 2021-09-23 14:06:46

replaceAll是一种新的功能es2021。就目前而言，它与IE不兼容。

我给你找了些可能有用的东西。如果你仍然有问题，请看一下并告诉我，How to replace all occurrences of a string in JavaScript on stackoverflow

票数 0

Stack Overflow用户

发布于 2021-09-26 02:42:45

我做了一个变通方法，从右到左阅读innerHTML，如果左边有"<“字符，则忽略匹配，这意味着匹配在标记内。虽然下面的解决方案看起来是手动的，但目前它对我来说是有效的。

<!DOCTYPE html>
<html>
<input type="text" onkeyup="highlight(this.value)">
<p>Hi! I'm feeling well and happy, hope you too. Thank you.</p>
<p id="WE1"><b>WE</b> wE, We, we.
  <a href="url_With_WE_we_wE_WeOnly">Only you.</a> 
  <span id="wemark">mark it in your calendar.</span>
</p>
<script>
function highlight(searchedWords) {
  var p = document.getElementsByTagName('p');
  for (var i=0; i<p.length; i++) {
    p[i].innerHTML = p[i].innerHTML.replace(new RegExp("<mark>", "gi"),(match) => ``);
    p[i].innerHTML = p[i].innerHTML.replace(new RegExp("</mark>","gi"),(match) => ``);
  }
  var words = searchedWords.trim();
  while (words.indexOf("  ") > -1) {words = words.replace("  "," ")}
  if (!words) return;
  words = words.split(" ");
  for (var i = 0; i < p.length; i++) {
    p[i].innerHTML = mark(p[i].innerHTML, words)
  }
}
function mark(str, words) {
 try {
  for (var j=0; j < words.length; j++) {
    var s = str.toLowerCase(), 
        x = words[j].toLowerCase().trim();
    while (s.lastIndexOf(x) > -1) {
      var loc = s.lastIndexOf(x), y = loc;
      while (y > 0) {
        y = y - 1;
        if (s.substr(y,1)=="<"||s.substr(y,1)==">") break;
      }
      if (s.substr(y, 1) != "<") {
        str = str.substring(0, loc) + "<mark>"
            + str.substr(loc, x.length) + "</mark>"
            + str.substring(loc + x.length, str.length);
      }
      s = s.substring(0, loc-1);
    }
  }
  return str;
 } catch(e) {alert(e.message)}
}
</script>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69300350

复制

相似问题

问使用纯Javascript突出显示包含其他元素的元素的textContent或innerText，该元素也基于用户的searchedWords
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用纯Javascript突出显示包含其他元素的元素的textContent或innerText，该元素也基于用户的searchedWordsEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用纯Javascript突出显示包含其他元素的元素的textContent或innerText，该元素也基于用户的searchedWords
EN