在用户选择后添加元素w/ text节点

Add element w/ text node after user selection

本文关键字：text 节点 元素 添加 用户 选择      更新时间：2023-09-26

我有以下函数，它在调用时使用文本字段中的text值在文档末尾创建一个新的文本节点:

   function addAfter () {
      var elem = document.getElementById('textfield').value;
      var h = document.createElement('span');
      var t = document.createTextNode(elem);    
      h.appendChild(t);
      document.body.appendChild(h);
   }

我想要它做的是在用户选择的文本之后立即添加文本(就像当您单击并拖动以选择文本时)。需要什么来取代document.body.appendChild(h);才能使其工作?

试试这个JS提琴

除了IE边缘(我相信)

    function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}
document.body.addEventListener('mouseup', function() {
(window.getSelection()) ? addText(window.getSelection().toString(), window.getSelection().baseNode.parentNode) : addText(document.selection.toString(), document.selection.baseNode.parentNode);
});
function addText(text, parent) {
parent.appendChild(document.createTextNode(text));
}

它的工作方式是使用mouseUp事件来确定文本是否已被选中。选中的文本存储在window.getSelected()或document.selected()下面，然后将该值以及选中文本的父值传递给addText函数。它使用文档appendChild和createTextNode方法将捕获的文本追加到DOM。

在以前的IE版本中，他们使用document.select()，但在Edge中，他们切换到getSelection(像其他人一样)，但是他们没有实现当你获得文本时返回的相同值，因此你不能真正抓住parentNode并轻松地附加到该节点。

所以，简而言之，这将给你你想要的，但它不是跨浏览器的，似乎没有办法做到这一点很容易。

我在另一个提要中找到了一个解决方案。

  function addAfter (isBefore) {
var sel, range, node;
var changeText = document.getElementById('textfield').value;
var textAndCode = "<span class='"correction'"> " + changeText + " </span>";
if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = window.getSelection().getRangeAt(0);
        range.collapse(isBefore);
        // Range.createContextualFragment() would be useful here but was
        // until recently non-standard and not supported in all browsers
        // (IE9, for one)
        var el = document.createElement("div");
        el.innerHTML = textAndCode;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ( (node = el.firstChild) ) {
            lastNode = frag.appendChild(node);
        }
        range.insertNode(frag);
    }
} else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    range.collapse(isBefore);
    range.pasteHTML(textAndCode);
}
}

如果您希望isBefore的值出现在

之后，则只需将其传递为false。
相关文章：