惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Jina AI
Jina AI
V
Vulnerabilities – Threatpost
Security Latest
Security Latest
AI
AI
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
量子位
H
Help Net Security
Attack and Defense Labs
Attack and Defense Labs
The GitHub Blog
The GitHub Blog
L
LINUX DO - 最新话题
A
Arctic Wolf
博客园_首页
S
Securelist
S
Secure Thoughts
Google DeepMind News
Google DeepMind News
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
T
Tailwind CSS Blog
Apple Machine Learning Research
Apple Machine Learning Research
酷 壳 – CoolShell
酷 壳 – CoolShell
Stack Overflow Blog
Stack Overflow Blog
N
Netflix TechBlog - Medium
Cyberwarzone
Cyberwarzone
小众软件
小众软件
T
Threatpost
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
Blog — PlanetScale
Blog — PlanetScale
N
News and Events Feed by Topic
NISL@THU
NISL@THU
Forbes - Security
Forbes - Security
博客园 - 聂微东
F
Fortinet All Blogs
Simon Willison's Weblog
Simon Willison's Weblog
H
Heimdal Security Blog
罗磊的独立博客
S
Security @ Cisco Blogs
B
Blog
T
Troy Hunt's Blog
Engineering at Meta
Engineering at Meta
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
The Hacker News
The Hacker News
The Last Watchdog
The Last Watchdog
Hacker News - Newest:
Hacker News - Newest: "LLM"
I
Intezer
T
Threat Research - Cisco Blogs
C
Cybersecurity and Infrastructure Security Agency CISA
The Cloudflare Blog
S
Schneier on Security
月光博客
月光博客
L
LINUX DO - 热门话题
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org

博客园 - jeky

rails 路由配置时 URL 地址如何匹配下划线? github.com 不能访问怎么办? Linux - 显示日历的命令 cal 用法 Linux - echo 命令如何追加文本? 如何解决ssh连接后长时间不操作断线的问题? Rails 中如何使用全局变量? raw 允许输出html字符 Linux 用户及组 话说调试 全等(===) 委托的协变与逆变 判断一个整数是奇数还是偶数 - jeky - 博客园 选择排序法 让我笔试吃亏"单例模式" Javascript中正则表达式的相识知识 对 TextBox 设置css属性 注意void()里面不能空 - jeky - 博客园 OWC11 实例 访问数组元素的 3 种方法 Internet Explorer 7.0(IE7.0)简体中文版
用Javascript实现关键词的高亮显示
jeky · 2009-03-13 · via 博客园 - jeky

  最近在搞一个网站,需要在内容区域高亮显示一些关键词。本来想在后台页面用c#实现,后来感觉这样做不太可取。因为我想高亮的高键词有n个之多,在服务端循环处理的话,势必会影响效率、占用服务器资源。所以,才考虑使用JS来实现,代码如下:

 一个小类(可以放置到一个*.js文件中)

    function XP_Highlight()
    
{
        
this.KeyWords = null;
        
        
// 格式化关键词
        this.formatKeyword = function(content, keyword)
        
{
            keyword 
= keyword.replace(/(^\s*)|(\s*$)/g, "");
            
if(keyword == '')
                
return content;
            
var reg = new RegExp('('+keyword+')''gi');
            
return content.replace(reg, '<em>$1</em>');
        }

        
        
// 重绘内容区域
        this.refreshContent = function(contentID)
        
{
            
var content = document.getElementById(contentID).innerHTML;
            
for(var i = 0; i < keywords.length; i ++)
            
{
                
var strKey = keywords[i].toString();
                
var arrKey = strKey.split(',');
                
for(var j = 0; j < arrKey.length; j ++)
                
{
                    
var key = arrKey[j];
                    content 
= this.formatKeyword(content, key);
                }

            }

            document.getElementById(contentID).innerHTML 
= content;
        }

    }

页面调用:

    // 关键词定义
    var keywords = 
    [
        [
'心情好转,好梦一场,,真不错,真好吃,哈哈,嘻嘻'],
        [
'头晕脑胀,疲乏气短,索然无味,,,折腾,生病,抱怨,疾病,累,疼,病'],
        [
'怎么了,啊,呀,喂']
    ];
    
    
    $(document).ready(
function(){
        
var hl = new XP_Highlight();
        hl.keywords 
= keywords; // 这里是关键词的定义
        hl.refreshContent(
'res'); // 这里是要格式化内容的元素Id号
    }
); 

CSS定义(可以设置多种风格,以支持不同类型的关键词):

em { font-size:small; color:#CC0033; font-style:normal; }

结束语:

以上代码在 FF3.0 及 IE8兼容模式下测试通过。
如何各位有其他方法或建议的话,请在这里回复,先谢谢了!