JS实现匹配文字高亮显示

用JS实现文字匹配并高亮显示,直接上代码:
    <body>
      <div id="content">
          苹果含有丰富的糖类、维生素、微量元素以及水溶性食物纤维和有机酸,是人们公认的健康之果。不仅如此,苹果还具有天然的怡人香气,这种清香气味对于人体来说,有舒缓压力、提神醒脑的功效,而苹果中充足的矿物质硼,也同样可以使困倦的大脑快速恢复清醒状态。喝杯咖啡不如吃个苹果的道理就正在于此了
      </div>
      <input type="text" id="text" placeholder="请输入关键字"/>
      <input type="button" id="button" value="确定"/>
      <script>
         var content = document.getElementById("content");
         var contents = content.innerHTML;
         var text = document.getElementById("text");
         var button = document.getElementById("button");
         button.onclick = function() {
             var value = text.value;
             var values = contents.split(value);
             content.innerHTML = values.join('<span style="background:red;">' + value + '</span>');
         };
      </script>
    </body>

效果图:

  • 8
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值