在中实现
搜索关键词高亮的方法可以参考以下步骤：
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 ]
3451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
