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
    评论
在中实现搜索关键词高亮的方法可以参考以下步骤: 1. 首先,获取要替换的文字区域,可以使用`this.state.newsList`来获取已经获取到的新闻列表数据。 2. 使用`filter`函数对新闻列表数据进行过滤。在`filter`函数中,可以定义一个正则表达式,用来匹配关键词。 3. 对每个新闻的标题进行替换,可以使用`replace`方法。在替换的过程中,可以使用模板字符串来定义高亮样式,例如`<span class="keyword">${keyword}</span>`。 4. 最后,将替换后的新闻列表数据渲染到组件中。 下面是一个示例代码: ```javascript render() { const newsList = this.state.newsList; if (this.props.type === 'tag' || this.props.type === 'search') { let keyword = this.props.id; // 这里是父组件传过来的关键词 newsList.filter((value, index) => { // 使用filter函数过滤新闻列表数据 var re = new RegExp(keyword, "g"); // 定义正则 value.title = value.title.replace(re, `<span class="keyword">${keyword}</span>`); // 进行替换,并定义高亮的样式 }); } return ( <div> {newsList.map((value, index) => { return (<NewsListItem news={value} key={index} />) // 把新闻传递给新闻列表的单个新闻组件 })} <div className="btn-more transition" onClick={this.fetchMoreList}>{this.state.loadingText}</div> </div> ); } ``` 在上述代码中,使用了`replace`方法进行关键词的替换,并将替换后的新闻列表数据渲染到组件中。可以根据需要自定义高亮样式,例如设置关键词的颜色为蓝色。 另外,如果需要在其他地方使用高亮方法,可以参考以下代码: ```javascript const highLight = (str, word) => { let result = str.replace(new RegExp(`(${word})`, 'ig'), '<span style="color:#12B8D7">$1</span>'); return result; }; ``` 在上述代码中,使用了`replace`方法对字符串进行替换,并定义了高亮的样式。可以将需要高亮字符串作为参数传入该方法,然后得到替换后的字符串。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [react中实现搜索结果中关键词高亮显示](https://blog.csdn.net/weixin_34055787/article/details/86263187)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [react搜索结果显示高亮(自定义颜色)](https://blog.csdn.net/m0_55536307/article/details/128634644)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值