在文本選擇之前/之后添加元素

Question

我正在尋找 function，它允許我在選定文本之前或之后構建一些元素。 類似於這個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中： 折疊給定范圍並使用pasteHTML插入元素

其他：還會折疊給定的Range並通過insertNode插入元素

---

兩個collapse-methods都接受一個可選參數，該參數定義了要折疊到的位置。 如果要將元素放在最后，請折疊到最后，否則為開頭。

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`)
    }
}