`

通过Js实现高亮显示

 
阅读更多

虾米链接:http://2814704901.iteye.com/blog/1930420

Js实现高亮显示,也是本人在网上看到的并运用到了舆情监控系统中。

这个例子仅仅使用与字体较少的关键字 如果关键字较长  则应该使用中文分词进行处理。

Luence中有专门的高亮显示架包   之前的博客中也简单提过

Js代码如下:

//pucl是你要进行高亮显示的标签对象  如div中的内容或者td中的内容

var pucl=$("#div");

keyword  就是你要高亮显示的字体   如:“北京”

function SearchHighlight(pucl, keyword) {

if ("" == keyword) {

return;

}

var temp = pucl.innerHTML;

var htmlReg = new RegExp("\<.*?\>", "i");

var arrA = new Array();

//替换HTML标签 

for ( var i = 0; true; i++) {

var m = htmlReg.exec(temp);

if (m) {

arrA[i] = m;

} else {

break;

}

temp = temp.replace(m, "{[(" + i + ")]}");

}

words = unescape(keyword.replace(/\+/g, ' ')).split(/\s+/);

//替换关键字 

for (w = 0; w < words.length; w++) {

var r = new RegExp("("

+ words[w].replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig");

temp = temp.replace(r, "<b style='color:Red;'>$1</b>");

}

//恢复HTML标签 

for ( var i = 0; i < arrA.length; i++) {

temp = temp.replace("{[(" + i + ")]}", arrA[i]);

}

pucl.innerHTML = temp;

}

 

分享到:
评论

相关推荐

    js代码高亮显示 JavaScript代码高亮 jsp

    JavaScript代码高亮显示是提高代码可读性的关键工具,通过使用像Highlight.js或Prism.js这样的库,可以在JSP页面上轻松实现这一功能。了解如何正确地集成和配置这些库,可以帮助开发者创建更专业、更易于阅读的代码...

    代码高亮显示javascript插件

    "代码高亮显示JavaScript插件"是专门用于在Web页面中美化和突出显示JavaScript代码的工具,它能够将原始的黑白文本代码转换为具有不同颜色、字体和样式的视觉盛宴。本文将深入探讨这一主题,详细介绍JavaScript代码...

    jS 正则表达式实现关键字高亮显示

    例如,将关键词包裹在`&lt;span class="highlight"&gt;`和`&lt;/span&gt;`之间,以实现高亮显示。 ```javascript function highlightKeywords(text, keywords) { const regex = new RegExp(keywords.join("|"), "gi"); return...

    react中实现搜索结果中关键词高亮显示

    正则表达式的使用是实现高亮显示的关键,它允许我们使用通配符和量词等来定义复杂的匹配模式。在示例中,正则表达式是通过RegExp构造函数创建的,其中第一个参数是关键词,第二个参数"g"表示全局匹配,即匹配整个...

    JavaScript点击高亮显示并显示属性信息

    本主题聚焦于如何利用SuperMap iClient 6R for JavaScript实现地图对象的点击高亮显示,并弹出popup窗口展示其属性信息。这在GIS应用中是一个常见的需求,例如用于查看详情、进行数据分析或者提供用户交互体验。 ...

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

    这个“Js高亮显示文本输入框.rar”压缩包可能包含了实现这一功能的相关代码和资源。下面我们将深入探讨JavaScript高亮显示文本输入框的技术要点。 首先,JavaScript是客户端网页交互的主要语言,它可以操作DOM...

    标签内JavaScript代码的高亮显示插件

    首先,`&lt;pre&gt;`标签内的JavaScript代码高亮显示插件通常是基于CSS和JavaScript实现的。这类插件通过解析`&lt;pre&gt;`标签内的代码,对关键字、变量、函数等进行不同颜色的标记,使得代码结构清晰,易于阅读。例如,...

    JS浏览器兼容的小问题,鼠标经过,,高亮显示

    在实现高亮显示功能时,可以通过CSS伪类、JavaScript操作样式或两者结合来达成。同时,要关注交互的流畅性和用户体验,避免因快速操作而产生的不必要问题。通过这样的方法,我们可以创建出在不同浏览器下都能正常...

    JavaScript实现鼠标滑过高亮显示二级菜单的纵向3级的导航菜单源码

    本示例源码主要涉及的是如何利用JavaScript实现一种常见的网页导航菜单效果:当鼠标滑过一级菜单时,对应的二级甚至三级菜单高亮显示,形成一个垂直的多层次导航结构。这样的设计既提升了用户体验,也使网站的导航...

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

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

    搜索内容高亮显示

    总的来说,搜索内容高亮显示是一个实用的功能,它通过结合字符串匹配、DOM操作和CSS样式,帮助用户在海量信息中快速定位目标。熟练掌握这一技术,对于提升网站或应用的用户体验有着显著的作用。

    css+js实现部分区域高亮可编辑遮罩层.docx

    该方法使用javascript和css来实现遮罩层的效果,遮罩层可以高亮显示指定区域,并且可以编辑该区域。 知识点1:css样式设置 在实现遮罩层时,需要设置css样式来控制遮罩层的显示和隐藏。例如,可以使用`display`属性...

    javascript实现代码高亮

    总的来说,`highlight.js`为JavaScript实现代码高亮提供了一个强大且灵活的解决方案。它不仅能够美化代码显示,还能帮助开发者轻松地定制和扩展高亮功能,提升网页的用户体验。通过深入学习和实践,我们可以更好地...

    页面sql编辑高亮显示

    标题“页面SQL编辑高亮显示”所涉及的技术核心在于如何在Web页面上实现一个具备实时高亮效果的SQL编辑输入框。描述中提到的资源提供了一个便捷的解决方案,它允许开发者在网页上创建一个类似客户端SQL编辑器的组件,...

    JavaScript实现鼠标滑过高亮显示纵向3级白色的导航菜单源码

    在这个"JavaScript实现鼠标滑过高亮显示纵向3级白色的导航菜单源码"中,我们将深入探讨如何利用JavaScript来创建一个具有层次感的导航菜单,并在用户鼠标滑过时实现高亮效果。 首先,我们需要理解导航菜单的基本...

    pdf.js 在线搜索文档,高亮显示,区分大小写,分页,放大缩小,下载,打印等功能插件

    pdf.js 在线搜索文档,高亮显示,区分大小写,分页,放大缩小,下载,打印等功能插件, ...

    一个JS实现简单的鼠标滑过表格整行或者整列动态高亮显示效果.zip

    这个"JS实现简单的鼠标滑过表格整行或者整列动态高亮显示效果.zip"文件提供了一种实用的方法,通过JavaScript技术来增强HTML表格的视觉反馈,使得用户在鼠标悬停时能够更加清晰地看到所选的行或列。下面我们将深入...

    Activiti12流程跟踪任务节点和线高亮显示

    在高亮显示流程节点和线时,我们可以使用HTML和CSS来实现高亮效果。例如,我们可以使用HTML的span元素来标记流程节点,然后使用CSS来设置高亮颜色和样式。对于流程线,我们可以使用HTML的svg元素来绘制流程线,然后...

    纯CSS3实现DIV高亮显示特效

    "纯CSS3实现DIV高亮显示特效"是一种技术,它利用CSS3的特性,无需依赖JavaScript或图像,就能创建出吸引人的高亮效果。这篇文章将深入探讨如何使用CSS3来实现这一效果。 首先,我们要了解CSS3的一些基本概念。CSS3...

    openlayers加载本地切片、高亮显示

    在这个主题中,我们将深入探讨如何利用OpenLayers加载本地切片,并实现高亮显示。 首先,我们需要理解什么是地图切片。地图切片是一种将大尺寸地图分割成多个小块(通常为正方形)的方法,便于更高效地在网络上传输...

Global site tag (gtag.js) - Google Analytics