`
icyheart
  • 浏览: 775783 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript做的高亮效果

阅读更多

方法一:

<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高亮效果的表单

    JavaScript 有Focus高亮效果的表单

    代码高亮显示javascript插件

    4. 用户自定义:开发者可以根据自己的喜好调整高亮样式,创建个性化的代码展示效果。 三、CodeMirror-2.22插件详解 CodeMirror是一个流行的开源代码编辑器组件,广泛应用于在线编辑器、代码示例和教程网站。Code...

    Google语法高亮JavaScript功能

    2. **示例**:示例文件展示了如何在实际项目中集成和使用该脚本,提供了各种语言的代码高亮效果,帮助开发者快速上手。 3. **教程文档**:Wiki教程文档详细介绍了如何配置和自定义语法高亮,包括选择主题、添加新的...

    javascript关键字高亮代码

    然后遍历这些关键词,并使用DOM操作将匹配到的文本包裹在一个带有特定样式的`&lt;span&gt;`标签中,从而实现高亮效果。 ```javascript var keys = [ ["", "http://www.baidu.com", "#ff0000"], ["ϵͳ", ...

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

    一旦确定了目标,可以通过修改其样式属性,如填充色、边框宽度等来实现高亮效果。SuperMap iClient 6R提供了API方法来修改这些样式属性。 接着,我们讨论如何展示属性信息。在JavaScript中,popup通常指的是一个可...

    利用html高亮javascript语法

    代码高亮主要是通过给不同的编程元素(如关键字、变量、字符串等)赋予不同的颜色和样式,以增强代码的视觉效果。在HTML中,我们可以使用`&lt;pre&gt;`和`&lt;code&gt;`标签来保留代码的原始格式,并在此基础上应用样式。 接...

    JavaScript表格高亮选择特效.zip

    5. **可选:动画效果**:为了增加用户体验,还可以添加过渡动画,使高亮效果更平滑。这可以通过CSS3的`transition`属性实现。 在提供的压缩包中,"说明.htm"很可能是对实现这个特效的详细步骤和代码示例的解释,而...

    JavaScript语法高亮显示与语言自动检测和零依赖.zip

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责实现客户端的动态效果和交互功能。在网页中,JavaScript通常嵌入HTML文档中,或者通过外部JS文件链接引入。"JavaScript语法高亮显示与语言自动...

    使用 javascript 标记高亮关键词

     }在JavaScript中,对文本内容进行关键词高亮是一项常见的需求,特别是在搜索结果展示或者代码高亮时。本段代码提供了一个名为`MarkHighLight`的函数,它实现了对HTML元素内指定关键词的高亮标记功能。 首先,我们...

    果断收藏9个Javascript代码高亮脚本

    Chili是一个功能强大的jQuery代码高亮插件,它集成了多种编程语言的支持,并且提供了多个可配置的设置选项,允许开发者根据自己的需求调整高亮效果。 4. Lighter.js Lighter.js是一个基于MooTools框架的免费代码...

    纯CSS3实现DIV高亮显示特效

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

    JavaScript交互效果.rar

    "JavaScript交互效果.rar"这个压缩包文件,正如其标题所示,包含了多种网页交互特效的实现,如轮播图、放大镜和Tab栏等。这些特效是现代网页设计中不可或缺的部分,能够极大地提升用户体验。 首先,轮播图是一种...

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

    **jQuery高亮插件——实现文本高亮与关键词查找** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及...在全文检索应用中,结合关键词高亮,能更直观地展示结果,增强交互效果。

    高亮显示的图片展示效果.rar

    在事件处理函数中,我们可以修改图片的CSS样式以实现高亮效果。以下是一个简单的示例: ```javascript var images = document.getElementsByClassName('album-image'); for (var i = 0; i ; i++) { images[i]....

    javascript开发代码高亮预研报告

    本文将深入探讨JavaScript开发中的代码高亮技术,以及如何利用相关工具提升代码的展示效果。 **一、代码高亮的重要性** 1. **提高代码可读性**:通过使用不同的颜色和样式,代码高亮能够快速区分不同的语法元素,...

    2.(echarts篇)echarts颜色地图边缘高亮.zip

    本话题聚焦于“ECharts颜色地图边缘高亮”这一特性,下面将详细介绍如何在ECharts中实现地图的边缘高亮效果。 首先,地图的边缘高亮效果通常是为了增加视觉焦点,突出地图区域之间的边界,使地图更具有吸引力和...

    9个javascript语法高亮插件 推荐

    本文将介绍九款基于JavaScript实现的语法高亮插件,这些插件能够为各种编程语言提供良好的代码格式化和高亮效果。 1. **SyntaxHighlighter** SyntaxHighlighter是由Alex Gorbatchev开发的知名插件,广泛应用于博客...

    jQuerySyntax是一个JavaScript客户端语法高亮显示

    3. **应用到代码元素**:使用 jQuery 选择器找到需要高亮的代码元素,并调用 `.syntax()` 方法来应用高亮效果。 4. **加载语法源文件**:如果需要高亮显示的语言未预加载,可以使用 `.loadSyntax()` 方法动态加载。...

    js当前导航高亮带链接跳转效果

    接下来,我们使用JavaScript来实现导航高亮效果。我们可以监听窗口的`load`和`hashchange`事件,当页面加载或URL哈希值改变时,检查当前页面对应的链接元素,并为该元素添加一个高亮样式。 ```javascript window....

    Highlightjs是一个用JavaScript写的代码高亮插件

    Highlight.js 是一个强大的、轻量级的JavaScript库,专门用于代码高亮显示。这个插件不仅适用于前端开发,还可以在服务器端应用,为开发者提供了便捷的方式来美化网页中的代码块,使其更易读、更具吸引力。由于它不...

Global site tag (gtag.js) - Google Analytics