js做高亮的两个方法

最新推荐文章于 2022-11-15 13:47:44 发布
最新推荐文章于 2022-11-15 13:47:44 发布
阅读量217 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/7in10/archive/2008/10/09/1307411.html
版权

方法一：利用正则替换

ContractedBlock.gif ExpandedBlockStart.gif Code
<html> 
<head> 
<title>Test Page</title> 
<script type="text/javascript"> 
<!-- 
function highLight(ele,keys) 
{ 
var reg = new RegExp("(" + keys.replace(/,/,"|") + ")","g"); 
ele.innerHTML = ele.innerHTML.replace(reg,"<font color=\"red\">$1</font>"); 
} 
window.onload = function() 
{ 
highLight(document.getElementsByTagName("p")[0],"li,jin"); 
} 
//--> 
</script> 
</head> 
<body> 
<p>liujinzhong liujinzhong liuzhong</p> 
</body> 
</html> 

 

方法二：利用文本替换，目前一些类似点睛的那种文字富媒体广告的实现都是基于该方法

 

ContractedBlock.gif ExpandedBlockStart.gif Code
ArchorTag1 = "<A id=\"vad_" + n + "\" name=\""+n+"\" title=\"" + adtitle + "\" class=\"vLink1\" ";
ArchorTag2 = " href=\"" + click_url + "\" target=\"_blank\" οnmοuseοver=\"this.style.borderBottom='2px "+link_color+" solid';
var fxEvent=arguments[0];kwmouseover(this,"+n+",fxEvent);\" οnmοuseοut=\"this.style.borderBottom='1px "+link_color+" dotted';kwmouseout(this,"+n+")\" >" + keywords + "</A>";
    if (notIE) {
        var textRange = document.body.createTextRange();
        while (textRange.findText(keywords)) {
            var parentNode = textRange.parentElement();
            kwAnchor = ArchorTag1 + " style=\"font-size:1em;border-bottom: 1px "+link_color+" dotted;text-decoration: underline;cursor: hand;color:"+link_color+";\"" + ArchorTag2;
            if (filterNode(parentNode) && inAdRange(parentNode)) {
                if(kwcount>max_pwn)
                    break;
                kwcount++;                
                textRange.pasteHTML(kwAnchor);
                break;
            }
            textRange.collapse(false);
        }
    }
    else {
        Accept_Node = function (node) {
            if (node.tagName == "IMG" || node.tagName == "A" || node.tagName == "FORM" || node.tagName == "OBJECT" || node.tagName == "SCRIPT") {
                return NodeFilter.FILTER_REJECT;
            } else {
                return NodeFilter.FILTER_ACCEPT;
            }
        };
        var TreeWalker = document.createTreeWalker(ad_area, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, Accept_Node, false);
        var vNodes = new Array();
        var range = document.createRange();
        while (cNode = TreeWalker.nextNode()) {
            if (cNode.nodeValue != null) {
                vNodes[vNodes.length] = cNode;
            }
        } 
        for (var i = 0; i < vNodes.length; i++) {
            var key = vNodes[i].nodeValue;
            var pos = key.indexOf(keywords);
            if (pos != -1) {
                range.selectNode(vNodes[i]);
                range.setStart(vNodes[i], pos);
                range.setEnd(vNodes[i], range.startOffset + keywords.length);
                range.deleteContents();
                var nNode = document.createElement("span");
                ArchorTag = ArchorTag1 + " style=\"font-size:1em;\"" + ArchorTag2;
                nNode.innerHTML = ArchorTag;
                range.insertNode(nNode);
                break;
            }
        }
    }

转载于:https://www.cnblogs.com/7in10/archive/2008/10/09/1307411.html

weixin_30879833
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Driver.js 轻量级、互动式的功能引导效果
06-26 90
4. 产品演示：在产品演示或教学视频中，使用 Driver.js 高亮关键功能和操作步骤。2. 多步骤引导：支持创建多个步骤的引导，每一步都可以高亮不同的元素并提供相应的说明。6. 灵活配置：提供丰富的配置选项，可以设置步骤的顺序、提示的位置、自动滚动等。5. 自定义样式：可以自定义高亮元素和提示框的样式，满足不同的设计需求。2. 功能介绍：在网站或应用中引入新功能时，通过步骤引导用户使用新功能。1. 新用户引导：帮助新用户快速了解网站或应用的主要功能和操作方法。
js使用highlight.js高亮你的代码
10-19
本篇文章主要介绍了js使用highlight.js高亮你的代码 ，非常具有实用价值，需要的朋友可以参考下
javascript高亮效果的二种实现方法
12-11
js高亮方法一： 代码如下:[removed] function HighLight(nWord){ if(nWord!=”){ var keyword = document.body.createTextRange(); while(keyword.findText(nWord)){ keyword.pasteHTML(“<span xss=removed>” + keyword.text + “</span>”); keyword.moveStart(‘character’,1); } } } function highword(nWord){ var array = nWo
js 实现高亮
Beaver‘s
03-31 390
最近在做一个平台，搜索关键字，展示包含该关键字的源码文件列表，点击进入源码后要求高亮关键字，用js 实现了关键字高亮，参考源码如下： [code="java"] Untitled Document //高亮显示搜索到的关键字 function HeightLight(...
JavaScript-高亮显示
丁世杰的博客
07-10 688
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/.
js实现代码高亮显示
圆静居士的专栏
01-16 3294
<template> <div> <div class="operation"> <input type="text" id="text" placeholder="请输入关键字"/> <el-button @click="highlightBtn">高亮&l...
firefox下javascript实现高亮关键词的方法
01-19
代码如下:IE下有: var range = document.createRange(); FireFox下有： var range = document.body.createTextRange();...　一个和尚挑水吃、两个和尚抬水吃、三个和尚没水吃。总寺的方丈大人得知情况后
js实现当前输入框高亮显示的方法
10-23
对于每一个输入框，都为它添加两个事件监听器：`onfocus`和`onblur`。当输入框获得焦点时，会触发`onfocus`事件，输入框的`className`被设置为`f-text-high`，使输入框以高亮样式显示。当输入框失去焦点时，会触发`...
js正文内容高亮效果的实现方法
10-27
2. 调用findText方法来搜索关键字，这个方法会在文档中查找给定文本的第一个匹配项。 3. 如果找到匹配项，则继续使用pasteHTML方法将匹配到的文本用HTML标签包裹起来，比如在这个例子中，使用了带有黄色背景的标签。...
帝国cms使用js+css实现当前栏目高亮效果的方法
09-29
下面我们将详细讲解如何使用这两种技术在帝国CMS中实现当前栏目高亮。 首先，我们需要在帝国CMS的模板页面部分进行修改。在模板文件中，你需要为每个栏目链接添加一个唯一的ID，以便JavaScript能够识别并操作。这...
javascript实现table选中的行以指定颜色高亮显示的方法
10-24
主要介绍了javascript实现table选中的行以指定颜色高亮显示的方法,实例分析了javascript操作table表格元素与相关样式的技巧,需要的朋友可以参考下
JavaScript点击高亮
最新发布
m0_71349739的博客
11-15 992
js点击高亮
原生JS实现代码高亮功能
qq_33297737的博客
05-24 2587
原生js实现代码高亮。词法分析，BNF，产生式，乔姆斯基谱系。
javascript表格行高亮显示
啊哈前端的专栏
01-08 900
表格行高亮效果 h2,h5,#tooltipMsg,p { white-space: nowrap; /*规定文本不换行*/ } td { border: 1px solid #ccc; height: 50px; text-align: cen
10.突出显示案例
qq_34620296的博客
01-01 489
1.效果如下 鼠标移动到相应的图片上会突出显示 代码 <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } ...
语法高亮的简单JavaScript实现
cleverpig
12-30 279
语法高亮的简单JavaScript实现 作者：cleverpig         最近参考Fernando M.A.d.S编写的CodePress，做了一个简单的JavaScript语法高亮实现（需要prototype1.4版支持）。在这里，和大家分享一下。 演示页面：         页面延用CodePress的风格，使用多个分别对应语言的CSS文件，文件名以相应的语言为后缀...
JS基础---用户注册高亮显示
qq_14954259的博客
03-07 325
账号：zhagnhao.onblur=function(){ var str=this.value; if(str.length<5) { this.className="warn"; alert("账号太短"); } else { this.className=""; alert("恭喜"); } }这是一个简单的小例子。
使用JavaScript实现代码高亮显示
在这个例子中，作者提供了一个JavaScript函数`CLASS_HIGHLIGHT`，这个函数接收两个参数：`code`代表要高亮的代码字符串，`syntax`可能是指定代码语言的标识，以便正确地应用高亮规则。 `CLASS_HIGHLIGHT`函数的核心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值