JavaScript实现文字转表情包、RegExp、正则、matchAll、createDocumentFragment、append、createElement、append、remove、slic

let str = '[左哼哼]你好[微笑]世界[哈哈]',str2 = '你好世界';function scrmTextEmojiRenderFn(value) {const reg = /\[+[^\[\]]+\]/g;if (value === null || value === undefined || value === '') value = '';const fragment = document.createDocumentFragment();let renderRes = value,renderArr = [...value.matchAll(reg)];if (renderArr.length > 0) { // 匹配[]为主的表情// 用reg.test(value)做判断，renderArr的少了第一项，不明原因let renderResArr = [];// 专门处理表情所处的位置，表情的长度renderArr.forEach(item => {let renderItemTemplate = {name: '',index: '',length: '',};renderItemTemplate.name = item[0];renderItemTemplate.index = item['index'];renderItemTemplate.length = renderItemTemplate.name.length;renderResArr.push(renderItemTemplate);})const renderEmojiFn = (name, spanDom, renderRes) => { // 专门处理表情的渲染// if (emojisAmap[name]) {// 字符串携带有[]//     spanDom.classList.add('emoji_a');//     spanDom.classList.add(emojisAmap[name]);// } else {spanDom.classList.remove('chat-emoji');spanDom.innerText = "[" + name + "]";// }renderRes.append(spanDom);};renderRes = document.createDocumentFragment();renderResArr.forEach((item, i) => {// 遍历筛选出来的标签，去源数据里面组装数据。// 根据源数据中的表情出现的位置顺序，// 去进行组装文字+标签+文字的数据// 根据每个出现的表情的前面是否有文字，// 标签的后面是否有文字进行拼装数据let { name, index, length } = item;name = name.split("[")[1].split("]")[0];let spanDom = document.createElement('span');spanDom.classList.add('chat-emoji');let renderText = '',rendertextSpan = document.createElement('span');if (i === 0) { // 第一项===>标签的[出现在第一项renderText = value.slice(0, index);rendertextSpan.innerText = rendertextSpan;renderRes.append(rendertextSpan); // 文字renderEmojiFn(name, spanDom, renderRes); // 表情if (renderResArr.length === 1) { // 当前筛选出来的表情只有一个数量的时候let nextRendertext = value.slice(index + length),nextRendertextSpan = document.createElement('span');nextRendertextSpan.innerText = nextRendertext;renderRes.append(nextRendertextSpan); // 文字}} else if (i === renderResArr.length - 1) { // 最后一项renderText = value.slice(length + index); // 在表情的后面文字let preItem = renderResArr[i - 1],preIndex = preItem.index + preItem.length,renderPreText = value.slice(preIndex, index), // 在表情的前面的文字renderPreTextSpan = document.createElement('span');renderPreTextSpan.innerText = renderPreText;renderRes.append(renderPreTextSpan);renderEmojiFn(name, spanDom, renderRes);rendertextSpan.innerText = renderText;renderRes.append(rendertextSpan);} else {let preItem = renderResArr[i - 1],preIndex = preItem.index + preItem.length;renderText = value.slice(preIndex, index);rendertextSpan.innerText = renderText;renderRes.append(rendertextSpan);renderEmojiFn(name, spanDom, renderRes);}})} else {const renderResSpan = document.createElement('span');renderResSpan.innerText = renderRes;renderRes = renderResSpan;}fragment.append(renderRes);return fragment;
}console.log(scrmTextEmojiRenderFn(str));
console.log(scrmTextEmojiRenderFn(str2));

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！