2018-12-11 react.js字符串设置某段字符串改变颜色样式

需求是:一段字符串如:麻辣烫小龙虾中的小龙虾,让其中的小龙虾三个字符加粗变颜色等。

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(

{nameArray[i]}

); } 4.输出界面 return ( {ar.map((item) => { return (item); })} ); }

你可能感兴趣的:(2018-12-11 react.js字符串设置某段字符串改变颜色样式)