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

【问题标题】：Add element before/after text selection在文本选择之前/之后添加元素
【发布时间】：2012-01-07 05:56:47
【问题描述】：

我正在寻找允许我在选定文本之前或之后构建一些元素的函数。类似于 javascript replace selection all browsers 的东西，但用于在选择之前或之后添加一些内容而不是替换它，例如 after() 和 before() jQuery 方法。我应该使用一些 DOM 选择方法，如果是，是哪一种？还是有更容易实现的东西？

【问题讨论】：

不是答案，但是：我敢打赌，使用 Tim Down 的 Rangy 库，你可以很容易地做到这一点。

标签： javascript jquery text selection range

【解决方案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);
})();

【讨论】：

这段代码 / jsfiddle 在 Chrome 中根本不起作用（也许在 2011 年就起作用了），它在 IE 中也没有按预期工作。
@user1254723：它在我的 Mac 上的 Chrome 中运行良好。它在我的 IE 11 中也能正常工作。
我在 Windows 10 上运行“版本 73.0.3683.103（官方版本）（64 位）”。我只是仔细检查了一遍，当我单击任一按钮时都没有任何反应。奇怪的是windows和mac之间会有这样的区别吗？ !
@user1254723：也可以在我的 Windows PC 上的 Chrome 上使用。在按下其中一个按钮之前，您必须将光标放在文本中的某个位置或选择一些文本；你确定要这么做吗？

【解决方案2】：

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

其他： 同样collapse给定范围并通过insertNode插入元素

两种折叠方法都接受一个可选参数，该参数定义了您想要折叠到的位置。如果要将元素放在末尾，则折叠到末尾，否则折叠到开头。

【讨论】：