splt.js字符拆分脚本处理特殊字符&异常问题求助

问题原因 #

你的代码直接通过split("")按单个字符拆分元素的innerHTML内容，导致HTML实体（如&这类由多字符组成的实体）被拆分成独立字符，进而被分别包裹到<span>标签中，破坏了实体的完整性。

解决方案 #

修改字符拆分逻辑，使用正则表达式匹配完整的HTML实体（包括命名实体如&和数字实体如 ），将每个实体视为单个处理单元，普通字符仍按单个处理。具体修改如下：

修改后的完整代码 #

function splt({ target: q = ".splt", reveal: o = !1 }) {
    let r = [],
        b = document.querySelectorAll(q);
    for (let a = 0; a < b.length; a++) {
        b[a].setAttribute("id", "i" + [a + 1]);
        r.push(b[a].innerHTML);
        // 清空原内容，避免残留子节点
        b[a].innerHTML = "";
        let l = b[a].innerHTML.split(" ");
        for (let g = 0; g < l.length; g++) {
            let m = document.createElement("span");
            l[g] += " ";
            // 使用正则匹配完整HTML实体或单个字符
            let h = l[g].match(/(&#?[a-zA-Z0-9]+;)|./g) || [];
            for (let c = 0; c < h.length; c++) {
                let d = document.createElement("span");
                m.appendChild(d);
                d.setAttribute("id", "c" + [c + 1]);
                if (" " == h[c]) {
                    d.classList.add("whtSpc");
                } else {
                    d.classList.add("char");
                }
                if (!0 == o) {
                    let i = document.createElement("span");
                    i.innerHTML = h[c];
                    d.appendChild(i);
                    i.setAttribute("id", "r");
                    i.classList.add("reveal");
                } else {
                    d.innerHTML = h[c];
                }
            }
            m.style.display = "inline-block";
            b[a].appendChild(m);
        }
    }
    let j = document.querySelectorAll(".char");
    for (let e = 0; e < j.length; e++) {
        j[e].style.display = "inline-block";
        j[e].style.overflow = "hidden";
        j[e].style.verticalAlign = "top";
    }
    let p = document.querySelectorAll(".whtSpc");
    for (let n = 0; n < p.length; n++) {
        p[n].style["white-space"] = "pre";
    }
    if (!0 == o) {
        let k = document.querySelectorAll(".reveal");
        for (let f = 0; f < k.length; f++) {
            k[f].style.display = "inherit";
            k[f].style.overflow = "inherit";
            k[f].style.verticalAlign = "inherit";
        }
    }
    splt.revert = () => {
        for (let a = 0; a < b.length; a++) {
            b[a].removeAttribute("id");
            b[a].innerHTML = r[a];
        }
    };
}
splt({ target: ".splt", reveal: !1 });

关键修改点 #

1. 替换拆分逻辑：将let h = l[g].split("");替换为let h = l[g].match(/(&#?[a-zA-Z0-9]+;)|./g) || [];，正则表达式会匹配完整的HTML实体或单个字符，确保实体不被拆分。
2. 清空原内容：将b[a].removeChild(b[a].childNodes[0]);改为b[a].innerHTML = "";，避免原内容残留导致的渲染问题。

这样处理后，&这类HTML实体会被作为一个整体包裹在单个<span>标签中，输出符合预期的<span>&amp;</span>。

内容的提问来源于stack exchange，提问作者Joel Alexandersson