美文网首页
2018-12-11 react.js字符串设置某段字符串改变颜

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

作者: 大唐帝国 | 来源:发表于2018-12-11 16:10 被阅读66次

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

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>
        );
    }

相关文章

网友评论

      本文标题:2018-12-11 react.js字符串设置某段字符串改变颜

      本文链接:https://www.haomeiwen.com/subject/qilehqtx.html