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>"));
            }
        });
    }
});

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

用于DOM引用的HTML：

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

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

0 个答案: