需求是:一段字符串如:麻辣烫小龙虾中的小龙虾,让其中的小龙虾三个字符加粗变颜色等。
rendHot(name) {
//name就是“麻辣烫小龙虾中的小龙虾”
//searchValue:要匹配的字段例如:小龙虾
let { searchValue } = this.props;
1.先找出该字符串中的所有小龙虾,把他替换成<*>小龙虾<*>
name=name.replace(new RegExp(searchValue,"g"),'<*>'+searchValue+'<*>')
2.再对其转换变成数组
let nameArray = name.split('<*>');
3.循环该数组分别添加对应的样式
let ar = [];
for (let i = 0; i < nameArray.length; i++) {
ar.push(<p key={i} className={ nameArray[i] === searchValue ? styles.hot:styles.de}>{nameArray[i]}</p>);
}
4.输出界面
return (
<span className={styles.n}>
{ar.map((item) => {
return (item);
})}
</span>
);
}