使用innerHTML替换innerText时出现[object HTMLSpanElement]错误

从API获取中文内容后，需为内容中的a-zA-Z0-9字符应用Montserrat字体，尝试用span包裹这些内容时，浏览器显示[object HTMLSpanElement]，而非预期的带span标签的结构。

预期生成的DOM结构：

<div class="vce-post-description--excerpt">
<p>打扰一下。打扰一下。<span style="font-family: Montserrat;">51612</span> <span style="font-family: Montserrat;">Hello</span> 打扰一下。打扰一下。</p>
</div>

错误原因 #

1. 代码中直接使用innerText.replace(item, tempElement)，innerText仅处理文本内容，传入DOM元素会自动调用其toString()方法，导致输出[object HTMLSpanElement]。
2. 循环中使用var i，会导致changeInnerText函数异步调用时，i的值已变为循环结束后的最大值，引发元素定位错误。

修正后的代码 #

document.addEventListener("DOMContentLoaded", () => {
    const regex = /[0-9A-Za-z]+/g;
    const textElements = document.querySelectorAll(".vce-post-description--excerpt");
  
    textElements.forEach(element => {
        const matches = element.innerText.match(regex);
        if (!matches) return;
        
        let htmlContent = element.innerHTML;
        matches.forEach(item => {
            // 转义正则特殊字符，避免匹配出错
            const escapedItem = item.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
            htmlContent = htmlContent.replace(new RegExp(escapedItem, 'g'), `<span style="font-family: Montserrat;">$&</span>`);
        });
        element.innerHTML = htmlContent;
    });
  
    console.log("Done");
})

关键修正说明 #

• 改用innerHTML处理内容，直接生成带span的HTML字符串，避免DOM元素被转为文本的问题。
• 使用forEach遍历元素，规避var导致的变量作用域泄漏问题。
• 对匹配字符串做特殊字符转义，防止正则表达式解析异常。
• 全局正则替换所有匹配项，确保所有符合规则的字符串都被正确包裹。

内容的提问来源于stack exchange，提问作者Knut Becker