JavaScript将搜索关键词高亮显示实例代码

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > JavaScript将搜索关键词高亮显示实例代码

搜索词高亮效果有着广泛的应用，当前的所有搜索引擎无不如此，很多网站的搜索功能也具有此功能，非常的人性化，下面就通过实例代码介绍一下如何实现此功能。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css">
em{color:red}
</style>
<script type="text/javascript">
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 key=keywords[i]; 
      content=this.formatKeyword(content,key); 
    } 
    document.getElementById(contentID).innerHTML=content; 
  } 
}
var keywords=["51前端","天气不错"]; 
window.onload=function()
{
  var hl=new XP_Highlight(); 
  hl.keywords=keywords;
  hl.refreshContent('res');
}
</script>
</head>
<body>
<div id="res">51前端欢迎你，只有努力才会有美好的未来，今天天气不错，要好好的珍惜</div>
</body>
</html>

代码描述：JavaScript 搜索关键词高亮显示。JavaScript将搜索关键词高亮显示实例代码

下载全部收藏

123 164

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册