javascript替换选择所有浏览器 [英] javascript replace selection all browsers

问题描述

是否有一个简单的js函数我可以使用我的某些html替换当前文档的选择？

Is there a simple js function I can use to replace the current document's selection with some html of mine?

例如说该文档包含< p> AHAHAHA< / p> 在某个地方，用户选择第一个ha文本块。

For instance say the document contains a <p>AHAHAHA</p> somewhere and user selects the 1st "ha" text chunk.

现在我要替换这类似于：< span>< font color =red> hoho< / font>< / span>

Now I want to replace this with something like: <span><font color="red">hoho</font></span>

当我google for * javascript替换选择* 我无法得到一个简单明了的答案！

When I google for *javascript replace selection * I can't get a simple straightforward answer!

推荐答案

是的。以下将在所有主流浏览器中执行此操作，并可选择在评论中按要求选择插入的内容（尽管此部分未针对IE< = 8实现）：

Yes. The following will do it in all major browsers, with an option to select the inserted content afterwards as requested in the comments (although this part is not implemented for IE <= 8):

现场演示： http://jsfiddle.net/bXsWQ/147/

代码：

function replaceSelection(html, selectInserted) {
    var sel, range, fragment;

    if (typeof window.getSelection != "undefined") {
        // IE 9 and other non-IE browsers
        sel = window.getSelection();

        // Test that the Selection object contains at least one Range
        if (sel.getRangeAt && sel.rangeCount) {
            // Get the first Range (only Firefox supports more than one)
            range = window.getSelection().getRangeAt(0);
            range.deleteContents();

            // Create a DocumentFragment to insert and populate it with HTML
            // Need to test for the existence of range.createContextualFragment
            // because it's non-standard and IE 9 does not support it
            if (range.createContextualFragment) {
                fragment = range.createContextualFragment(html);
            } else {
                // In IE 9 we need to use innerHTML of a temporary element
                var div = document.createElement("div"), child;
                div.innerHTML = html;
                fragment = document.createDocumentFragment();
                while ( (child = div.firstChild) ) {
                    fragment.appendChild(child);
                }
            }
            var firstInsertedNode = fragment.firstChild;
            var lastInsertedNode = fragment.lastChild;
            range.insertNode(fragment);
            if (selectInserted) {
                if (firstInsertedNode) {
                    range.setStartBefore(firstInsertedNode);
                    range.setEndAfter(lastInsertedNode);
                }
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE 8 and below
        range = document.selection.createRange();
        range.pasteHTML(html);
    }
}

示例：

replaceSelection('<span><font color="red">hoho</font></span>', true);

这篇关于javascript替换选择所有浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！