方法一:
<script>
functionHighLight(nWord){
if(nWord!=''){
varkeyword=document.body.createTextRange();
while(keyword.findText(nWord)){
keyword.pasteHTML("<spanstyle='color:red;'>"+keyword.text+"</span>");
keyword.moveStart('character',1);
}
}
}
functionhighword(nWord){
vararray=nWord.split(",");
for(vari=0;i<array.length;i++){
HighLight(array[i]);
}
}
</script>
<bodyonload="highword('li,jin')">
<p>liujinzhongliujinzhongliuzhong</p>
</body>
方法二:
<html>
<head>
<title>TestPage</title>
<scripttype="text/javascript">
<!--
functionhighLight(ele,keys)
{
varreg=newRegExp("("+keys.replace(/,/,"|")+")","g");
ele.innerHTML=ele.innerHTML.replace(reg,"<fontcolor=\"red\">$1</font>");
}
window.onload=function()
{
highLight(document.getElementsByTagName("p")[0],"li,jin");
}
//-->
</script>
</head>
<body>
<p>liujinzhongliujinzhongliuzhong</p>
</body>
</html>
分享到:
相关推荐
JavaScript 有Focus高亮效果的表单
4. 用户自定义:开发者可以根据自己的喜好调整高亮样式,创建个性化的代码展示效果。 三、CodeMirror-2.22插件详解 CodeMirror是一个流行的开源代码编辑器组件,广泛应用于在线编辑器、代码示例和教程网站。Code...
2. **示例**:示例文件展示了如何在实际项目中集成和使用该脚本,提供了各种语言的代码高亮效果,帮助开发者快速上手。 3. **教程文档**:Wiki教程文档详细介绍了如何配置和自定义语法高亮,包括选择主题、添加新的...
然后遍历这些关键词,并使用DOM操作将匹配到的文本包裹在一个带有特定样式的`<span>`标签中,从而实现高亮效果。 ```javascript var keys = [ ["", "http://www.baidu.com", "#ff0000"], ["ϵͳ", ...
一旦确定了目标,可以通过修改其样式属性,如填充色、边框宽度等来实现高亮效果。SuperMap iClient 6R提供了API方法来修改这些样式属性。 接着,我们讨论如何展示属性信息。在JavaScript中,popup通常指的是一个可...
代码高亮主要是通过给不同的编程元素(如关键字、变量、字符串等)赋予不同的颜色和样式,以增强代码的视觉效果。在HTML中,我们可以使用`<pre>`和`<code>`标签来保留代码的原始格式,并在此基础上应用样式。 接...
5. **可选:动画效果**:为了增加用户体验,还可以添加过渡动画,使高亮效果更平滑。这可以通过CSS3的`transition`属性实现。 在提供的压缩包中,"说明.htm"很可能是对实现这个特效的详细步骤和代码示例的解释,而...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责实现客户端的动态效果和交互功能。在网页中,JavaScript通常嵌入HTML文档中,或者通过外部JS文件链接引入。"JavaScript语法高亮显示与语言自动...
}在JavaScript中,对文本内容进行关键词高亮是一项常见的需求,特别是在搜索结果展示或者代码高亮时。本段代码提供了一个名为`MarkHighLight`的函数,它实现了对HTML元素内指定关键词的高亮标记功能。 首先,我们...
Chili是一个功能强大的jQuery代码高亮插件,它集成了多种编程语言的支持,并且提供了多个可配置的设置选项,允许开发者根据自己的需求调整高亮效果。 4. Lighter.js Lighter.js是一个基于MooTools框架的免费代码...
"纯CSS3实现DIV高亮显示特效"是一种技术,它利用CSS3的特性,无需依赖JavaScript或图像,就能创建出吸引人的高亮效果。这篇文章将深入探讨如何使用CSS3来实现这一效果。 首先,我们要了解CSS3的一些基本概念。CSS3...
"JavaScript交互效果.rar"这个压缩包文件,正如其标题所示,包含了多种网页交互特效的实现,如轮播图、放大镜和Tab栏等。这些特效是现代网页设计中不可或缺的部分,能够极大地提升用户体验。 首先,轮播图是一种...
**jQuery高亮插件——实现文本高亮与关键词查找** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及...在全文检索应用中,结合关键词高亮,能更直观地展示结果,增强交互效果。
在事件处理函数中,我们可以修改图片的CSS样式以实现高亮效果。以下是一个简单的示例: ```javascript var images = document.getElementsByClassName('album-image'); for (var i = 0; i ; i++) { images[i]....
本文将深入探讨JavaScript开发中的代码高亮技术,以及如何利用相关工具提升代码的展示效果。 **一、代码高亮的重要性** 1. **提高代码可读性**:通过使用不同的颜色和样式,代码高亮能够快速区分不同的语法元素,...
本话题聚焦于“ECharts颜色地图边缘高亮”这一特性,下面将详细介绍如何在ECharts中实现地图的边缘高亮效果。 首先,地图的边缘高亮效果通常是为了增加视觉焦点,突出地图区域之间的边界,使地图更具有吸引力和...
本文将介绍九款基于JavaScript实现的语法高亮插件,这些插件能够为各种编程语言提供良好的代码格式化和高亮效果。 1. **SyntaxHighlighter** SyntaxHighlighter是由Alex Gorbatchev开发的知名插件,广泛应用于博客...
3. **应用到代码元素**:使用 jQuery 选择器找到需要高亮的代码元素,并调用 `.syntax()` 方法来应用高亮效果。 4. **加载语法源文件**:如果需要高亮显示的语言未预加载,可以使用 `.loadSyntax()` 方法动态加载。...
接下来,我们使用JavaScript来实现导航高亮效果。我们可以监听窗口的`load`和`hashchange`事件,当页面加载或URL哈希值改变时,检查当前页面对应的链接元素,并为该元素添加一个高亮样式。 ```javascript window....
Highlight.js 是一个强大的、轻量级的JavaScript库,专门用于代码高亮显示。这个插件不仅适用于前端开发,还可以在服务器端应用,为开发者提供了便捷的方式来美化网页中的代码块,使其更易读、更具吸引力。由于它不...