添加下划线功能后HTML富文本编辑器出现从右到左书写异常求助

问题原因 #

你遇到的从右到左（RTL）书写异常，核心问题出在每次输入事件触发时全量替换innerHTML的操作上：

• 全量替换innerHTML会彻底重置contenteditable元素的内部状态，包括光标位置、文本方向的上下文信息。浏览器重新渲染内容时，可能错误触发自动文本方向检测（即便没有RTL字符），导致文本方向被切换为RTL。
• 另外你提供的JS代码里，替换逻辑是把boy替换成boy，这根本没实现下划线功能，推测是笔误（应该是替换为<u>boy</u>），但即便修正这个，全量替换innerHTML的操作依然会引发光标混乱和文本方向问题。

修复方案 #

1. 强制文本方向 #

给contenteditable元素添加dir="ltr"属性，明确指定从左到右书写，避免浏览器自动判断出错：

<div id="content" contenteditable="true" spellcheck="false" dir="ltr"></div>

2. 精准修改DOM，避免全量替换 #

放弃全量替换innerHTML的方式，用DOM遍历和局部修改的方式给boy添加下划线，同时保留光标位置：

const contentDiv = document.getElementById("content");

contentDiv.addEventListener("input", () => {
    // 保存当前光标位置
    const selection = window.getSelection();
    const savedRange = selection.rangeCount > 0 ? selection.getRangeAt(0).cloneRange() : null;

    // 遍历所有文本节点，只修改包含"boy"的部分
    const walker = document.createTreeWalker(contentDiv, NodeFilter.SHOW_TEXT);
    let currentNode;
    while (currentNode = walker.nextNode()) {
        const text = currentNode.textContent;
        if (!/\bboy\b/.test(text)) continue;

        const parent = currentNode.parentNode;
        // 分割文本，把"boy"单独提取出来
        const segments = text.split(/(\bboy\b)/);
        
        parent.removeChild(currentNode);
        // 重新插入节点，给"boy"添加下划线
        segments.forEach(segment => {
            if (!segment) return;
            if (/\bboy\b/.test(segment)) {
                const uTag = document.createElement('u');
                uTag.textContent = segment;
                parent.appendChild(uTag);
            } else {
                parent.appendChild(document.createTextNode(segment));
            }
        });
    }

    // 恢复光标位置
    if (savedRange) {
        selection.removeAllRanges();
        selection.addRange(savedRange);
    }
});

这个方案的优势：

• 只修改需要格式化的文本片段，不会破坏原有DOM结构和编辑器状态。
• 保存并恢复光标位置，避免输入时光标跳变。
• 配合dir="ltr"彻底杜绝RTL方向异常。

内容的提问来源于stack exchange，提问作者Ayush Nobeen