可编辑div是前端实现轻量级富文本编辑的常用方案，通过给div添加contenteditable属性即可让用户直接在页面上编辑内容，但在动态更新div内的HTML内容时，很容易出现文本反转的问题，比如输入“abc”却显示“cba”，或者粘贴内容后顺序错乱。
文本反转问题的常见原因
可编辑div的文本反转通常不是内容本身的问题，而是DOM操作和光标处理不当导致的，常见诱因有以下几点：
- 直接修改innerHTML后没有同步更新浏览器的选区状态，浏览器默认的光标位置计算出现偏差
- 更新内容时没有保留原有的DOM节点结构，浏览器重新渲染时打乱了文本节点的顺序
- 在输入事件触发时同步修改内容，打断了浏览器默认的输入处理流程
正确的HTML内容更新实践
1. 更新前保存光标位置
在修改可编辑div的内容之前，需要先保存当前的光标位置，避免更新后光标跳转到错误位置导致文本顺序异常。可以通过Selection和Range API实现光标位置的保存：
// 保存可编辑div的光标位置
function saveCursorPosition(element) {
const selection = window.getSelection();
if (!selection.rangeCount) {
return null;
}
const range = selection.getRangeAt(0);
// 判断光标是否在目标元素内
if (!element.contains(range.commonAncestorContainer)) {
return null;
}
// 记录光标相对于元素起始位置的偏移量
const preSelectionRange = range.cloneRange();
preSelectionRange.selectNodeContents(element);
preSelectionRange.setEnd(range.startContainer, range.startOffset);
const start = preSelectionRange.toString().length;
return {
start: start,
end: start + range.toString().length
};
}
2. 更新内容后恢复光标位置
内容更新完成后，需要根据之前保存的位置恢复光标，保证用户的编辑流程不被打断，同时避免文本顺序错乱：
// 恢复可编辑div的光标位置
function restoreCursorPosition(element, savedPosition) {
if (!savedPosition) {
return;
}
const selection = window.getSelection();
const range = document.createRange();
let charIndex = 0;
let nodeStack = [element];
let node = null;
let foundStart = false;
let stop = false;
// 遍历所有文本节点找到对应的偏移位置
while (!stop && (node = nodeStack.pop())) {
if (node.nodeType === Node.TEXT_NODE) {
const nextCharIndex = charIndex + node.length;
if (!foundStart && savedPosition.start >= charIndex && savedPosition.start <= nextCharIndex) {
range.setStart(node, savedPosition.start - charIndex);
foundStart = true;
}
if (foundStart && savedPosition.end >= charIndex && savedPosition.end <= nextCharIndex) {
range.setEnd(node, savedPosition.end - charIndex);
stop = true;
}
charIndex = nextCharIndex;
} else {
let i = node.childNodes.length;
while (i--) {
nodeStack.push(node.childNodes[i]);
}
}
}
selection.removeAllRanges();
selection.addRange(range);
}
3. 避免同步修改输入事件的内容
不要在input或者compositionupdate事件中直接同步修改可编辑div的内容，这会打断浏览器的输入处理流程，很容易触发文本反转。如果需要处理输入内容，建议在事件结束后异步执行更新：
const editableDiv = document.getElementById('editableDiv');
editableDiv.addEventListener('input', function() {
// 异步更新内容，避免打断浏览器默认输入流程
setTimeout(() => {
const cursorPos = saveCursorPosition(editableDiv);
// 这里可以处理需要更新的HTML内容，比如过滤非法标签
const newContent = editableDiv.innerHTML.replace(/<script>.*?</script>/gi, '');
editableDiv.innerHTML = newContent;
restoreCursorPosition(editableDiv, cursorPos);
}, 0);
});
完整示例代码
以下是一个可直接运行的可编辑div示例，实现了内容过滤的同时避免文本反转问题：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>可编辑div内容更新示例</title>
<style>
#editableDiv {
width: 500px;
height: 200px;
border: 1px solid #ccc;
padding: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="editableDiv" contenteditable="true">请输入内容</div>
<script>
const editableDiv = document.getElementById('editableDiv');
// 保存光标位置函数
function saveCursorPosition(element) {
const selection = window.getSelection();
if (!selection.rangeCount) {
return null;
}
const range = selection.getRangeAt(0);
if (!element.contains(range.commonAncestorContainer)) {
return null;
}
const preSelectionRange = range.cloneRange();
preSelectionRange.selectNodeContents(element);
preSelectionRange.setEnd(range.startContainer, range.startOffset);
const start = preSelectionRange.toString().length;
return {
start: start,
end: start + range.toString().length
};
}
// 恢复光标位置函数
function restoreCursorPosition(element, savedPosition) {
if (!savedPosition) {
return;
}
const selection = window.getSelection();
const range = document.createRange();
let charIndex = 0;
let nodeStack = [element];
let node = null;
let foundStart = false;
let stop = false;
while (!stop && (node = nodeStack.pop())) {
if (node.nodeType === Node.TEXT_NODE) {
const nextCharIndex = charIndex + node.length;
if (!foundStart && savedPosition.start >= charIndex && savedPosition.start <= nextCharIndex) {
range.setStart(node, savedPosition.start - charIndex);
foundStart = true;
}
if (foundStart && savedPosition.end >= charIndex && savedPosition.end <= nextCharIndex) {
range.setEnd(node, savedPosition.end - charIndex);
stop = true;
}
charIndex = nextCharIndex;
} else {
let i = node.childNodes.length;
while (i--) {
nodeStack.push(node.childNodes[i]);
}
}
}
selection.removeAllRanges();
selection.addRange(range);
}
editableDiv.addEventListener('input', function() {
setTimeout(() => {
const cursorPos = saveCursorPosition(editableDiv);
// 过滤script标签，避免XSS风险
const newContent = editableDiv.innerHTML.replace(/<script>.*?</script>/gi, '');
editableDiv.innerHTML = newContent;
restoreCursorPosition(editableDiv, cursorPos);
}, 0);
});
</script>
</body>
</html>
注意事项
在实际使用中还需要注意以下几点：
- 如果只需要处理纯文本，建议使用innerText而不是innerHTML更新内容，减少HTML解析带来的问题
- 对于复杂的富文本编辑需求，优先考虑成熟的富文本编辑器库，避免重复处理这类底层兼容问题
- 不同浏览器对contenteditable的实现存在差异，测试时需要覆盖主流浏览器版本
正确的可编辑div内容更新核心是遵循浏览器的默认处理流程，先保存状态再更新内容，最后恢复状态，避免打断浏览器对输入和光标的内置处理逻辑。