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
}
赞
(1)
打赏
微信扫一扫
支付宝扫一扫
微信扫一扫
支付宝扫一扫
javascript,es6,react获取textarea的光标位置并插入内容
上一篇
2020年03月21日 10:14
正则匹配入门笔记
下一篇
2020年03月21日 10:26
这里是广告位
相关推荐
-
原生js或者jquery获取父级元素/同级元素/下级元素
jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如$(\"p\")
-
Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
在设置请求头的时候报这个Failed to execute setRequestHeader on XMLHttpRequest: The objects st
-
react javascript内奇怪的结构获取方法Promise {<pending>} __proto__: Promise [[PromiseStatus]]: "resolved" [[PromiseValue]]:
代码如下：Promise {<pending>}__proto__: Promise[[PromiseStatus]]: \"resolved\"[[Promi
