如何使用JavaScript突出显示搜索字符串结果

下面是一个关于如何突出显示搜索字符串结果的HTML文档。在本文中，我们使用HTML、CSS、JavaScript、Bootstrap和mark.js使我们的网站更加有效。此外，专门用于在给定的上下文或段落中突出显示搜索字符串的mark.js在此特定代码中起着重要作用。在解决这个问题之前，请记住，这个问题可以通过其他许多方法来解决，但我认为这也是解决这个问题的一个更好方法。

mark.js是什么？

mark.js是一个简单的JavaScript工具，用于突出显示文本。它用于动态标记搜索项或自定义正则表达式，并提供一些内置选项，如发音符支持、独立单词搜索等。

方法：

当您在搜索框中输入某个字符串并按下搜索按钮时，将调用一个名为highlight()的简单JavaScript函数，它的主要作用是突出显示您在搜索框中输入的搜索文本。在这个小例子中，我们要使用mark.js代码来突出显示文本。
mark.js中有很多内置函数，但我们对我们的需求使用两个函数，即mark()和unmark()函数。其中，mark()用于突出显示搜索文本，unmark()用于取消之前突出显示的文本。

mark()的语法：

var context = document.querySelector(".context");
var obj = new Mark(context);
obj.mark(searchkeyword [, options]);

让我们以稍微技术化的方式理解这段代码，
- 首先，我们声明一个变量，其中包含要从中查找和突出显示搜索文本的上下文。
- 创建mark的对象，然后通过之前创建的obj调用mark()方法。
- 它带有两个参数，一个是搜索关键字，另一个是可选的参数。

unmark()的语法：

var context = document.querySelector(".context");
var obj = new Mark(context);
obj.unmark(options);

这与上面的技术几乎相同，但唯一的细微差别是unmark()方法只带有一个可选参数。此外，如果您想要更改突出显示器的颜色和填充，则需要在mark内部的CSS代码中进行微小的更改，如下所示：

mark {
    color: black;
    background: green;
    padding: 5px;
}

希望您已经成功地按照上述步骤更改了特定突出显示文本的颜色。但是请确保没有任何字符串以特定颜色突出显示，如果有，请不要忘记取消之前搜索的文本的突出显示。然后，标记要搜索的新字符串，并根据您的方便更改其颜色。
有关更多信息，请参阅此页面。

示例：

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">

    <!-- CDN of fontawsome -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- CDN of Bootstrap -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
        integrity=
"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
        crossorigin="anonymous">

    <!-- CDN of mark.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"
        integrity=
"sha512-5CYOlHXGh6QpOFA/TeTylKLWfB3ftPsde7AnmhuitiTX4K5SqCLBeKro6sPS8ilsz1Q4NRx3v8Ko2IBiszzdww=="
        crossorigin="anonymous">
    </script>

    <!-- CDN of google font -->
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap'
        );
    </style>

    <style>
        mark.a0 {
            color: black;
            padding: 5px;
            background: greenyellow;
        }

        mark.a1 {
            color: black;
            padding: 5px;
            background: cyan;
        }

        mark.a2 {
            color: black;
            padding: 5px;
            background: red;
        }

        mark.a3 {
            color: white;
            padding: 5px;
            background: green;
        }

        mark.a4 {
            color: black;
            padding: 5px;
            background: pink;
        }
    </style>
</head>

<body style="border:4px solid rgb(0, 128, 28);">
    <h1 style="font-family: 'Roboto Slab',
        serif;text-align: center;color:green;">
        GeeksForGeeks
    </h1>
    <br><br>

    <form>
        <div class="container-fluid" align="center">
            <input type="text" size="30"
                placeholder="search..." id="searched"
                style="border: 1px solid green;
                        width:300px;height:30px;">

            <button type="button" class="btn-primary btn-sm"
                style="margin-left:-5px;height:32px;width:35px;
                        background-color:rgb(12, 138, 12);
                        border:0px;" onclick="highlight('0');">

                <i class="fa fa-search"></i>
            </button>
        </div>
    </form>
    <br><br>

    <div align="center">
        <div>
            <b><i>Choose the color of highlighter:</i></b>
        </div>
        <br>
        <div style="background-color: cyan;
            width: 20px; height: 20px;
            display: inline-block; margin-left: -30px;"
            onmouseover="highlight('1')">
        </div>

        <div style="background-color: red;
            width: 20px; height: 20px;
            display: inline-block; margin-left: 10px;"
            onmouseover="highlight('2')">
        </div>

        <div style="background-color: green;
            width: 20px; height: 20px;
            display: inline-block; margin-left: 10px;"
            onmouseover="highlight('3')">
        </div>

        <div style="background-color: pink;
            width: 20px; height: 20px;
            display: inline-block; margin-left: 10px;"
            onmouseover="highlight('4')">
        </div>
    </div>

    <div class="container-fluid" style=
        "padding-left: 30%; padding-right: 30%;
        padding-top: 5%;">

        <p class="select">
            GeeksforGeeks.org was created with a
            goal in mind to provide well written,
            well thought and well explained solutions
            for selected questions.The core team of
            five super geeks constituting of technology
            lovers and computer science enthusiasts
            have been constantly working in this
            direction.
        </p>
    </div>

    <script>
        function highlight(param) {

            // Select the whole paragraph
            var ob = new Mark(document.querySelector(".select"));

            // First unmark the highlighted word or letter
            ob.unmark();

            // Highlight letter or word
            ob.mark(
                document.getElementById("searched").value,
                { className: 'a' + param }
            );
        }
    </script>
</body>

</html>

输出：

如何使用JavaScript突出显示搜索字符串结果