range.insertNode() 未按预期插入文本节点

Posted 2023-03-05

【中文标题】range.insertNode() 未按预期插入文本节点

【英文标题】：range.insertNode() is not inserting text node as expected

【发布时间】：2015-03-12 22:35:48

【问题描述】：

我正在创建一个 chrome 扩展。基本上，如果用户单击内容菜单选项，我想在所选文本之前和之后插入 html 格式标签。

标签被添加到事件页面中，在添加格式标签后，将新值触发到消息对象的“粘贴”键中的内容脚本。

我的内容脚本的代码如下：

chrome.runtime.onMessage.addListener(handleRequest)

function handleRequest(message, sender)

    if (message.paste!==undefined) 
    
        var newNode = document.createTextNode('');
        newNode.innerHTML=message.paste;   

        var cursor = window.getSelection().getRangeAt(0);       
        cursor.deleteContents();     
        cursor.insertNode(newNode);    
        alert(newNode.innerHTML);       
    

我认为我这样做是正确的，因为根据this

如果要将新节点添加到文本节点，则该节点在插入点处被拆分，并且插入发生在两个文本节点之间。

但是，单击上下文菜单选项的结果只是删除选择的任何文本。永远不会添加新文本，但不会将错误打印到控制台。

我知道这不适用于输入元素或文本区域中的内容，现在我只是想让它在页面上的常规文本上工作。

正如预期的那样，警报弹出窗口的内容是格式标记中包含的选定文本。

有人可以解释我做错了什么吗？我不应该编辑文本节点的 HTML 吗？我是否缺少使文本出现的最后一步？

错误演示：

如果我突出显示此问题的标题，则会出现以下警告框（我单击了 strikethrough 选项）。请注意，标题已从页面中消失。

【问题讨论】：

如果我理解正确，我不知道。你把de消息，删除所有。也许你需要做：node.innerHTML = node.innerHTML + message.paste。将所有消息放在同一个节点中。

只有一个消息值。它位于粘贴键中。例如，如果我选择文本“fooBar”并单击“粗体”，则粘贴键将包含“fooBar，这将通过警报框确认

【参考方案1】：

由 document.createTextNode('') 创建的对象没有 innerHTML 属性。如果你想替换它的内容，你可以这样做：

var newNode = document.createTextNode('');
newNode.replaceWholeText(message.paste);

如果您使用 HTML 内容进行渲染，看起来它可能会破坏渲染，因此您要么必须获取父容器并直接编辑其 innerHTML，要么将新节点包装在一些元素中种类，如果合适的话，如下：

var newNode = document.createElement('b');
newNode.innerHTML = message.paste;

【讨论】：

如果文本节点没有innerHTML属性，那么为什么alert(newNode.innerHTML)会按预期返回message.paste的值？

另外，如果我选择后一种路线，我在哪里可以找到与我要创建的各种元素相对应的 HTML 标签名称列表？我找不到列表的事实首先阻止了我这样做，因为我不知道使用什么作为参数来创建删除线元素，例如

在 javascript 中，您可以轻松地将新属性附加到现有对象 - 这就是您所做的。但这不是当您将节点的内容添加到 DOM 时将如何访问它的方式。为了证明这一点，请尝试在构造函数中设置一个初始值，例如 var newNode = document.createTextNode('FOO');然后测试它。当您添加它时，而不是缺少标题，我确定它将被构造函数中的 FOO 替换。

当然，现在解决您的第二条评论 - 我将在这里使用元素列表：w3schools.com/jsref/default.asp 格式化的重点将是：“i”、“b”、“u”表示斜体，粗体，下划线 - 分别为删除线的“del”。例如，我倾向于说“跨度”是为了没有格式，或者如果你想要一些带有样式属性的东西，这样你就可以做颜色。另一件事是您可以使用 createElement("span") 然后在其上使用 innerHTML 来放入您想要的任何内容，只要您不介意在标记中编辑的部分将位于 span 标签内。跨度>