JavaScript打字机效果无法解析&lt;字符，如何实现<br>换行？

问题根源 #

你的代码是逐个字符拼接innerHTML，但<br>作为HTML实体，被拆分成单个字符插入时，浏览器会将每个字符视为普通文本渲染，不会等到完整实体拼接完成后解析为<br>换行标签，因此最终显示的是实体文本而非换行效果。

解决思路 #

核心是避免拆分HTML标签（或实体转换后的标签），将内容拆分为普通文本片段和HTML标签片段，分别处理：文本片段逐个字符插入，标签片段完整插入，确保浏览器能正确解析HTML标签。

方案一：直接使用HTML标签并分段处理 #

修改文本内容为真实的<br>标签，然后将内容拆分为文本和标签的数组，分别处理插入逻辑：

let other = document.getElementById('other');
// 将内容拆分为文本和HTML标签的片段数组
let contentSegments = ["Hello World ", "<br>", " this typing effect."];
let segmentIndex = 0;
let charIndex = 0;

function typeWriter() {
    if (segmentIndex < contentSegments.length) {
        const currentSegment = contentSegments[segmentIndex];
        // 判断当前片段是HTML标签还是普通文本
        if (currentSegment.startsWith('<') && currentSegment.endsWith('>')) {
            // 完整插入HTML标签
            other.innerHTML += currentSegment;
            segmentIndex++;
        } else {
            // 逐个字符插入普通文本
            if (charIndex < currentSegment.length) {
                other.innerHTML += currentSegment.charAt(charIndex);
                charIndex++;
            } else {
                // 当前文本片段处理完，切换到下一个片段
                charIndex = 0;
                segmentIndex++;
            }
        }
        setTimeout(typeWriter, 10);
        window.scrollTo(0, document.body.scrollHeight);
    }
}

typeWriter();

方案二：先解码HTML实体再处理 #

如果必须保留原始的<br>实体格式，可先将实体解码为真实的HTML标签，再用方案一的逻辑处理：

let other = document.getElementById('other');
// 原始包含HTML实体的文本
let encodedTxt = "Hello World <br> this typing effect.";

// 解码HTML实体为真实的HTML内容
const tempDiv = document.createElement('div');
tempDiv.innerHTML = encodedTxt;
const decodedContent = tempDiv.innerHTML; // 现在内容是"Hello World <br> this typing effect."

// 将解码后的内容拆分为文本和标签片段
const contentSegments = decodedContent.split(/(<[^>]+>)/).filter(seg => seg);
let segmentIndex = 0;
let charIndex = 0;

function typeWriter() {
    if (segmentIndex < contentSegments.length) {
        const currentSegment = contentSegments[segmentIndex];
        if (currentSegment.startsWith('<') && currentSegment.endsWith('>')) {
            other.innerHTML += currentSegment;
            segmentIndex++;
        } else {
            if (charIndex < currentSegment.length) {
                other.innerHTML += currentSegment.charAt(charIndex);
                charIndex++;
            } else {
                charIndex = 0;
                segmentIndex++;
            }
        }
        setTimeout(typeWriter, 10);
        window.scrollTo(0, document.body.scrollHeight);
    }
}

typeWriter();

HTML部分保持不变：

<h1 id='other'></h1>

内容的提问来源于stack exchange，提问作者Merry Ricard