如何在页面中搜索单词并突出显示它们 (JQuery)

Question

我目前有一组用户输入的单词和相应的突出显示颜色存储在对象中（下面是在用户按钮单击和输入时构造数组的函数）：

//DECLERATIONS////
var placementId = 0;
var searchList = [];

///FUNCTION THAT ADDS A NEW WORD TO SEARCHLIST////////
function addWord(userWord, userColor){ //append new word to find and highlight
    var wordAndColorPair = {
        word: userWord,
        color: userColor,
        id: placementId
    }
    searchList.push(wordAndColorPair);
}

///////BELOW IS THE EVENT THAT ACTUALLY CONSTRUCTS THE ARRAY//////////

$('.color-element').click(function(){ //adding new word-color pairs
    var userInput = $('#input-word').val();
    if(userInput !== ''){ //only if user enteres text:
        var newWord = document.createElement("span"); //create a new search word tile

        newWord.classList.add('search-word'); //add the class search-word to it
        newWord.textContent = userInput; //make its text value equal to the input

        var colorId = $(this).attr('id'); //set its bacckground color to a copy of the button clicked
        $(newWord).css("background-color", colorId);

        $(newWord).attr('id', placementId); //set this new elements unique ID for delection purposes

        $('.display-array').append(newWord); //append the child to the DOM

        addWord(userInput, colorId, placementId); //add the word to the search list - increment placementId for future words
        placementId ++;

        $('#input-word').val(''); //reset the input field
    }
    else{
        return;
    }
});

我遇到的问题是能够搜索整个页面并实际突出显示数组中看到的单词。我到目前为止是：

$('.search').click(function(){ //when the search button is clicked
    var i;
    for(i =0; i< searchList.length; i++){//for each word user inputted:
        $("*").contents().each(function() {
            var word = searchList[i].word;
            var regex = new RegExp('(\b'+word+'\b)', 'gi');
            if(this.nodeType == 3){ //if text
                $(this).html(text.replace(regex, " <span style = 'background-color: " + searchList[i].color + " ;'> " + searchList[i].word + "</span>"));
            }
        });
    }
});

然而，这似乎不起作用，非常感谢任何帮助！

HTML 用于 DOM 参考：

<html lang="en">

<head>
    <link href="https://fonts.googleapis.com/css?family=Changa:700|Roboto+Condensed:700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script type = "text/javascript" src="popup.js"></script>
    <meta charset="utf-8">
    <title>Word Finder</title>
    <link rel="stylesheet" href="style.css" media="screen">

    <meta name="description" content="Word Finder Chrome Extension">
    <meta name="author" content="Aalok Borkar">
</head>

<body>
    <p>
        this is a test of the funcitonality TEXT text text text hello

    </p>

    <div class = "input">
        <div class = "word">
            Word <input type = "text" id = 'input-word' placeholder= "Jim Halpert"></input>
        </div>

        <div class = "color-palette">
            <!-- on click: clear text input, add color, append search array / display array -->
            <button class = "color-element" id = "red"></button>
            <button class = "color-element" id = "orange"></button>
            <button class = "color-element" id = "yellow"></button>
            <button class = "color-element" id = "green"></button>
            <button class = "color-element" id = "blue"></button>
            <button class = "color-element" id = "violet"></button>
            <button class = "color-element" id = "pink"></button>               
        </div>
    </div>

    <div class = "display">
        <p> Words to Search</p>
        <div class = "display-array">
        </div>
    </div>

    <button class = "search">Search</button>

</body>

</html>

Answer 1

需要这样做：

$(this).parent().html($(this).parent().html().replace($(this).text(),$(this).text().replace(regex, " <span style = 'background-color: " + searchList[i].color + " ;'>" + searchList[i].word + "</span> ")));

这是因为当您直接更改 innerHTML 时，您会弄乱 dom 结构并丢失 html 格式，当您单独更改文本时，您将获得经过消毒的 DOM 内引号，所以应该通过修改内部 html.

内的文本部分来解决

see it here

Answer 2

我向您的 <p> 元素添加了一个 class，但您可能不必这样做。我这样做只是为了方便我自己访问。如果我理解你的问题的话，最重要的是你的搜索功能。 IMO，您需要查看每个单词并将其与搜索数组进行比较。找到匹配的单词并将其包装在可以应用样式的内容中。就我而言，我选择了 <span> 标签。 Fiddle 下面的代码。

// HTML Modification
<p class="searchable">
  this is a test of the functionality TEXT text text text hello
</p>

$('.search').click(function() { //when the search button is clicked
  var original = $('.searchable').html().trim();
  var searchable = original.split(" ");
  for (var i = 0; i < searchList.length; i++) { //for each word user 
inputted:
    for (var s = 0; s < searchable.length; s++) {
      if (searchable[s] == searchList[i].word) {
        searchable[s] = "<span style='background:" + searchList[i].color + 
";'>" + searchList[i].word + "</span>";
      }
    }
  }

  rewrite(searchable);  //SEE BELOW
});

// This iterates over the searchable array
function rewrite(searchable) {
  var highlighted = "";
  for (var i = 0; i < searchable.length; i++) {
    highlighted += searchable[i] + "&nbsp;";
  } 
  $('.searchable').html(highlighted.trim());
}

https://jsfiddle.net/5v3aqrzd/

如何在页面中搜索单词并突出显示它们 (JQuery)

How to search page for words and highlight them (JQuery)

javascript

jquery

highlight

nodes