react正则匹配字符串中指定字符替换成dom节点

react正则替换字符串中的表情符号[开心],换行\n,空格符\r为br

oldDom= "哈哈哈[开心]nr是的呢"
//注意 必须新创建一个变量进行分割
//先把字符串中的n换行 替换成<BR>
const newDom = oldDom.replace(/n/g,"<BR>");
//下面就开始匹配字符串中 <BR>换行 和 [.*]表情
let newDom2 = newDom.split(/(<BR>+)|[([^]]+)]/g).map((s)=>this.getEmojiDom(s))
/**
     * 替换字符串中的换行和表情
     */
    getEmojiDom = (textName)=>{
        // 如果字符串是换行符的话直接返回br标签
        if(textName === '<BR>') return <br />
        let s = '';//初始化一个变量
        //emojiArr 是我的表情数组
        emojiArr.map((item,key)=>{
            //判断当前的字符串是否 和 我数组中的表情key一致 如果一致的话就 创建 img标签 并且把表情图片地址 赋值给img
            if(item.textName === `[${textName}]`){
                s =  <img key={`${item.textName}-${key}-${Number.parseInt(new Date().getTime())}`} style={{width:'20px',height:'20px'}} src={`https://img.fendoug.com/Im/Expression/emoji/${item.urlName}@2x.${item.extension}`} />
            }
        })
        //判断如果匹配到了 表情则 返回表情的dom 否则 直接返回字符串
        return s==='' ? textName : s
     }

发表评论

登录 后才能评论