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