JavaScript实现文字转表情包RegExp正则matchAllcreateDocumentFragmentappendcreateElementappendremoveslic

Posted 2022-03-22 web半晨

let str = '[左哼哼]你好[微笑]世界[哈哈]',
    str2 = '你好<div></div>世界';

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