最近几天在搞网站前端开发中的搜索框，网上看了一些代码，也是一头雾水。昨天调试出来，就和大家分享一下。
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
<p></p><input type="text" value="" id="keyWord"><a href="javascript:;" class="search">搜索</a>
<div class="text">
<br>
《临江仙·滚滚长江东逝水》是明代文学家杨慎创作的一首词。词的上阕通过历史现象咏叹宇宙永恒、江水不息、青山常在，而一代代英雄人物却无一不是转瞬即逝。下阕写词人高洁的情操、旷达的胸怀。把历代兴亡作为谈资笑料以助酒兴，表现了词人鄙夷世俗、淡泊洒脱的情怀。全词基调慷慨悲壮，读来只觉荡气回肠、回味无穷，平添万千感慨在心头。
</div>
<script>
var str = $('.text').html(); //获取目标文本
$('.search').click(function(){
var keywords = $('#keyWord').val();//获取搜索框的值
var reg = new RegExp(""+keywords+"","g");//正则表达式匹配文本中的所有关键字，如果没有g，则只怕匹配第一个关键词，后面出现的不进行匹配
var result = str.replace(reg,"<font style='color:#F00;font-weight:700;'>"+keywords+"</font>");
//这里把关键字提取出来，增加样式，进行替换。
$('.text').html(result);//把替换完成的脚本插入到原来位置。
})
</script>
</body>
</html>