javascript javascript替换所有浏览器的选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5393922/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript replace selection all browsers
提问by Didier Levy
Is there a simple js function I can use to replace the current document's selection with some html of mine?
是否有一个简单的 js 函数可以用来用我的一些 html 替换当前文档的选择？
For instance say the document contains a <p>AHAHAHA</p>somewhere and user selects the 1st "ha" text chunk.
例如，文档包含<p>AHAHAHA</p>某处，用户选择第一个“ha”文本块。
Now I want to replace this with something like: <span><font color="red">hoho</font></span>
现在我想用以下内容替换它： <span><font color="red">hoho</font></span>
When I google for *javascript replace selection *I can't get a simple straightforward answer!
当我用谷歌搜索 * javascript 替换选择 *我无法得到一个简单明了的答案！
回答by Tim Down
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):
是的。以下将在所有主要浏览器中执行此操作，并可以根据评论中的要求选择随后插入的内容（尽管这部分未针对 IE <= 8 实现）：
Live demo: http://jsfiddle.net/bXsWQ/147/
现场演示：http: //jsfiddle.net/bXsWQ/147/
Code:
代码：
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);
}
}
Example:
例子：
replaceSelection('<span><font color="red">hoho</font></span>', true);
回答by sakibfarid
You can use the Rangy library http://code.google.com/p/rangy/
您可以使用 Rangy 库 http://code.google.com/p/rangy/
You can then do
然后你可以做
var sel = rangy.getSelection();
var range = sel.getRangeAt(0);
range.deleteContents();
var node = range.createContextualFragment('<span><font color="red">hoho</font></span>');
range.insertNode(node);
