我一直在寻找答案，但失败了。
是否有跨浏览器解决方案来替换contenteditable div 中的选定文本？
我只是希望用户突出显示某些文本并将突出显示的文本替换为xxxxx.
替换 contenteditable div 中的选定文本
IT技术
javascript
contenteditable
2021-03-15 05:18:54
3个回答
以下将在所有主要浏览器中完成这项工作：
function replaceSelectedText(replacementText) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createTextNode(replacementText));
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.text = replacementText;
}
}
当我发布了一个关于如何在 contentEditable div 中的字母之间添加表情符号的工作示例时？ ，您可以使用它来替换内容可编辑 div 中所需的文本
function pasteHtmlAtCaret(html) {
let sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
const el = document.createElement("div");
el.innerHTML = html;
let frag = document.createDocumentFragment(),
node,
lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
function addToDiv(event) {
const emoji = event.target.value;
const chatBox = document.getElementById("chatbox");
chatBox.focus();
pasteHtmlAtCaret(`<b>${emoji}</b>`);
}
function generateEmojiIcon(emoji) {
const input = document.createElement("input");
input.type = "button";
input.value = emoji;
input.innerText = emoji;
input.addEventListener("click", addToDiv);
return input;
}
const emojis = [
{
emoji: "😂",
},
{
emoji: "❤️",
},
];
emojis.forEach((emoji) => {
document
.getElementById("emojis")
.appendChild(generateEmojiIcon(emoji.emoji));
}); #emojis span {
cursor: pointer;
}
#chatbox {
border: 1px solid;
} <button
type="button"
onclick="document.getElementById('chatbox').focus();
pasteHtmlAtCaret('<b>INSERTED</b>'); "
>
Paste HTML
</button>
<div id="emojis"></div>
<div id="chatbox" contenteditable></div>我需要替换文本节点，并在粘贴时保留 html 实体。这是我如何解决了这个问题，不知道数据在textnodes，也许这是最好用的textContent或别的东西
let selection = window.getSelection()
, range = selection.getRangeAt(0)
, fragment = range.extractContents();
fragment.childNodes.forEach( e => e.data && (e.data = doSomething(e.data)) );
range.insertNode(fragment);