搜索关键字变色

最近几天在搞网站前端开发中的搜索框,网上看了一些代码,也是一头雾水。昨天调试出来,就和大家分享一下。

<!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>

 

©️2020 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值