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

📅  最后修改于: 2021-08-30 09:51:38             🧑  作者: Mango

下面给出的是一个 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() 方法只接受一个参数,即可选的。此外,如果您想更改荧光笔的颜色和填充,那么我们需要对标记内的 CSS 代码进行细微更改,如下所示:
    mark {
        color: black;
        background: green;
        padding: 5px;
    }
  • 希望您已成功执行上述步骤,以便更改特定突出显示文本的颜色。但是在这里确保不应该有任何字符串以任何特定颜色突出显示,如果是这样,那么不要忘记取消突出显示之前搜索过的文本。此后,标记要搜索的新字符串,您可以根据自己的方便更改其颜色。
  • 有关更多信息,请关注此页面。

例子:

HTML


  

    
  
    
    
  
    
    
  
    
    
      
    
    
  
    

  

    

        GeeksForGeeks     

    

       
        
                                     
    
    

           
        
            Choose the color of highlighter:         
        
        
        
           
        
           
        
           
        
    
       
           

            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.         

    
          


输出: