react native 提取字符串中关键字改颜色

rn开发中常遇到需求是字符串中提取关键字,将其标注成其他颜色或放大等改变其样式,最近恰好遇到此需求,实现方法如下

我遇到的需求示例:
“@周杰伦 你要注意这段歌词,@王力宏@方大同,你俩注意这段旋律”
上面这段字符串中@的人标蓝色;

const content = '@周杰伦 你要注意这段歌词,@王力宏@方大同,你俩注意这段旋律';
const remindUsrs = [
{name:'周杰伦',code:'1'},
{name:'王力宏',code:'2'},
{name:'方大同',code:'3'}
];

//@人员列表存在,则将content根据@人员列表分裂成数组
let contentArr;
if(remindUser && remindUser.length){
  remindUser.forEach(({name})=>{
    content = content.replace(`@${name}`,`<^replace$>@${name}<^replace$>`);
  });
  contentArr = content.split('<^replace$>');
 }

render(){
  return(
    
      {
        contentArr ?
          contentArr.map((item,index)=>{

            //remindUser列表中的标记蓝色
            if(remindUser.some(user=>`@${user.name}`===item)){
              return {item}
            }

            //item可能为空字符串,不会展示,无妨碍
            return {item}
          })
          :content
      }
     
  )
}

你可能感兴趣的:(react native 提取字符串中关键字改颜色)