`

JavaScript对搜索的文字高亮显示

阅读更多
function SearchHighlight(mytag) {
    if (!document.createElement)
    {
        return;
    }
    var q = "{{$q}}";//要高亮显示的关键字
    var l = document.getElementsByTagName(mytag);
    if("" == q) return;
    words = unescape(q.replace(/+/g,' ')).split(/s+/);
    for (w=0;w<words.length;w++) {
        for(i=0;i<l.length;i++)
        {
            var pa = new RegExp("("+words[w]+")","ig");
            if(l.parentNode.parentNode.parentNode.id != "header")//标题中的内容不替换
            l.innerHTML = l.innerHTML.replace(pa,"<span class="searchword">$1</span>");
        }
    }
}
1、正则表达式
2、向后引用
调用方法:
document.onload = SearchHighlight(”a”);//要搜索的标签名称,这里的意思是凡是形如<a></a>的标记中的内容,包含关键字的时候均高亮显示。然后把下面的CSS定义加到你的CSS文件里或者直接加到HTML文件中
.searchword{background-color:yellow;}
那么所有的关键字(不论大小写)将显示为黄色背景。
 
分享到:
评论

相关推荐

    jQuery查找关键词文字高亮显示代码

    本示例中的"jQuery查找关键词文字高亮显示代码"是一个实用的功能,用于提升用户体验,特别是在用户进行搜索时。当用户在搜索框中输入关键词后,页面上与关键词匹配的部分会被高亮显示,使得用户能快速定位到相关内容...

    Jquery 文字高亮显示

    本文将深入探讨如何使用 jQuery 实现文字高亮显示的功能。 首先,我们需要理解高亮显示的基本原理。在网页中,我们通常通过改变文本的背景色或者字体颜色来实现高亮效果。在 jQuery 中,我们可以利用 CSS 样式来...

    搜索内容高亮显示

    本示例主要探讨如何实现这个功能,以"搜索栏输入文字后,在内容中高亮显示搜索文字demo"为例进行讲解。 首先,我们要明白搜索高亮的基本原理。当用户在搜索栏输入关键词后,系统会遍历内容,找到与关键词匹配的部分...

    jquery段落文字内容高亮显示.rar

    "jquery段落文字内容高亮显示"这个主题是关于如何利用jQuery库来实现文本的高亮显示功能,这在很多应用场景中非常实用,比如搜索引擎结果的突出显示、阅读器中的关键词标记等。jQuery是一个轻量级的JavaScript库,它...

    jquery text文本框搜索段落文本关键词文字高亮显示

    接下来,我们编写JavaScript代码,这部分代码主要使用jQuery监听文本框的`keyup`事件,每当用户输入时,触发搜索并高亮显示关键词。在`search_highlight.js`文件中写入以下内容: ```javascript $(document).ready...

    jQuery查找关键词文字高亮显示代码.zip

    在这个名为"jQuery查找关键词文字高亮显示代码.zip"的压缩包中,包含了一个使用jQuery实现的搜索关键词高亮显示的示例。这个功能在很多场合都非常实用,比如搜索引擎结果展示或者文本搜索定位。 首先,`index.html`...

    jQuery段落文字内容高亮显示提示-20130712

    本文将深入探讨如何使用jQuery实现段落文字内容的高亮显示提示,以此提升网页用户体验。 首先,我们要了解jQuery的核心概念。jQuery通过一个简洁的语法封装了大量的JavaScript方法,使得开发者可以更高效地进行页面...

    jquery段落文字内容高亮显示提示

    在标题“jquery段落文字内容高亮显示提示”中,我们聚焦于一个特定的功能:如何使用 jQuery 实现文本高亮显示,并提供用户提示。下面将详细介绍这个主题。 首先,要实现文本高亮显示,我们需要找到目标段落(`&lt;p&gt;`...

    jquery高亮插件(支持textarea内容高亮)

    在网页开发中,有时我们需要对页面上的特定文本或者关键词进行高亮显示,以突出其重要性或帮助用户快速定位。这时,jQuery高亮插件就能派上用场。本文将详细介绍一个支持textarea内容高亮的jQuery插件,及其应用方法...

    react-一个可以把文本中多个关键字高亮显示的react组件

    这个“react-一个可以把文本中多个关键字高亮显示的react组件”就是为了满足这样的需求而设计的。这个组件可以帮助开发者轻松地实现关键词高亮功能,提升用户在浏览和搜索文本时的体验。 首先,让我们了解React组件...

    带搜索的ztree 结果高亮

    在压缩包中的"带搜索的树,结果高亮显示ztree"可能包含了实现这一功能的示例代码、配置文件和样例数据,可以通过学习和研究这些资源来理解和实现类似的搜索高亮功能。 在实际应用中,可能还需要考虑性能优化,例如...

    Js高亮显示文本输入框.rar

    在JavaScript编程中,高亮显示文本输入框是一个常见的需求,特别是在开发富文本编辑器、代码编辑器或搜索功能时。这个“Js高亮显示文本输入框.rar”压缩包可能包含了实现这一功能的相关代码和资源。下面我们将深入...

    页面高亮搜索到的文字

    在前端开发中,"页面高亮搜索到的文字"是一个常见的需求,特别是在文本检索或阅读器应用中。这个功能能够帮助用户快速定位并突出显示他们在页面上搜索的关键字,提高用户体验。下面将详细介绍这一技术实现的核心知识...

    jQuery搜索框输入下拉文字高亮代码.zip

    该功能通过JavaScript库jQuery实现,它结合了模糊搜索和高亮显示的技术,使得用户在输入框中输入文字后,下拉列表中的匹配项会将关键词高亮显示,方便用户查看。 首先,我们要了解jQuery的基础。jQuery是一个高效、...

    jQuery搜索框输入下拉文字高亮显示

    本示例中的“jQuery搜索框输入下拉文字高亮显示”是一个常见的用户界面功能,常见于许多网站的搜索功能中。这个功能的主要目标是提升用户体验,使用户能够更直观地找到与其输入内容匹配的选项。 首先,让我们理解这...

    JavaScript简单实现关键字文本搜索高亮显示功能示例

    在Web开发中,对用户输入的关键字进行文本搜索并高亮显示结果是一项常见的功能。本文将详细讲解如何利用JavaScript实现这一功能,并涉及到一些前端开发的基础知识点,包括HTML、CSS和JavaScript的基本使用以及事件...

    vue高亮显示插件

    为了更好地编写 Vue.js 代码,我们可以安装特定的插件来实现代码的高亮显示,提升代码可读性和编写体验。 "vue高亮显示插件"是专门为 Sublime Text 设计的,用于在编辑 Vue.js 项目时提供语法高亮支持。这样的插件...

    react-reactmarker高亮显示关键字并为您的文字添加颜色

    React-ReactMarker是一款用于在文本中高亮显示关键字并为文字添加颜色的库,特别适合于需要突出显示代码示例、搜索结果或者任何其他需要强调特定词汇的场景。这款库是基于React构建的,因此它能够很好地融入到React...

    记事本软件 还原 可以高亮显示各种语法 自定义语法高亮 支持ANSI,Unicode,UTF-8等编码互换

    6 对括号{}〔〕()可以高亮配对显示,方便查看(仅对英文符号有效) 7 可以自定义代码页和字符集,对中文支持良好 8 使用标准的正则表达式搜索和替换 9 可以使用半透明模式,cool 10 快速放大、缩小页面,不用...

    用JS将搜索的关键字高亮显示实现代码

    在这个问题中,我们将使用JavaScript来遍历网页内容,并找到用户搜索的关键字,然后对其进行样式修改以实现高亮显示。 关键步骤如下: 1. **获取关键字**:关键字通常来自用户的搜索输入或者服务器传递的数据。在...

Global site tag (gtag.js) - Google Analytics