在文本选择之前/之后添加元素

Question

我正在寻找允许我在选定文本之前或之后构建一些元素的函数。像这样的类似 javascript 替换所有浏览器的选择，但在选择之前或之后添加一些内容而不是替换它，例如

after()

和

before()

jQuery 方法。我应该使用某种 DOM 选择方法吗？如果是的话，是哪一种？或者是否存在更容易执行的方法？

Answer 1

这是执行此操作的一对函数。

实例：http://jsfiddle.net/hjfVw/

代码：

var insertHtmlBeforeSelection, insertHtmlAfterSelection;

(function() {
    function createInserter(isBefore) {
        return function(html) {
            var sel, range, node;
            if (window.getSelection) {
                // IE9 and non-IE
                sel = window.getSelection();
                if (sel.getRangeAt && sel.rangeCount) {
                    range = window.getSelection().getRangeAt(0);
                    range.collapse(isBefore);

                    // Range.createContextualFragment() would be useful here but is
                    // non-standard and not supported in all browsers (IE9, for one)
                    var el = document.createElement("div");
                    el.innerHTML = html;
                    var frag = document.createDocumentFragment(), node, lastNode;
                    while ( (node = el.firstChild) ) {
                        lastNode = frag.appendChild(node);
                    }
                    range.insertNode(frag);
                }
            } else if (document.selection && document.selection.createRange) {
                // IE < 9
                range = document.selection.createRange();
                range.collapse(isBefore);
                range.pasteHTML(html);
            }
        }
    }

    insertHtmlBeforeSelection = createInserter(true);
    insertHtmlAfterSelection = createInserter(false);
})();

Answer 2

在 MSIE 中： collapse给定范围并使用pasteHTML插入元素

其他： 还collapse给定的范围并通过insertNode

插入元素

---

两种折叠方法都接受一个可选参数，该参数定义了要折叠到的位置。 如果你想把元素放在最后，折叠到最后，否则折叠到开始。

Answer 3

function yourFunction() {
    const sel = window.getSelection ? window.getSelection() : document.selection.createRange()
    if (!sel) return false

    if (sel.getRangeAt) {
        const range = sel.getRangeAt(0)
        const text = range.toString()
        console.log(text)
        range.deleteContents()
        range.insertNode(document.createTextNode(`before text${text}after`))
    } else {
        sel.pasteHTML(`[s=спойлер]${sel.htmlText}after`)
    }
}

Answer 4

使用节点的

.after()

和

after()

方法。这是一个例子：

const p = document.querySelector(".paragraph-1")
let container = document.createElement("div");
container.innerHTML = "NEWLY ADDED ELEMENT"
p.after(container)