Javascript window.getSelection() 给了我选定的文本，但我想要 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2139616/
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
window.getSelection() gives me the selected text, but I want the HTML
提问by Bob Fanger
I'm extending a WYSIWYG HTML editor (for Firefox), I want to add tags around a selection. I can't find a function to accomplish this in the Mozilla Midas specification.
我正在扩展 WYSIWYG HTML 编辑器（用于 Firefox），我想在选择周围添加标签。我在Mozilla Midas 规范中找不到实现此目的的函数。
There is a command to replace the selection with HTML.
So if I could read the selection contents, I could add my tags to this string.
有一个命令可以用 HTML 替换选择。
所以如果我可以阅读选择内容，我可以将我的标签添加到这个字符串中。
window.getSelection()almost works, but it gives me nsISelectionwhich converts to a plain-text string.
window.getSelection()几乎可以工作，但它给了我nsISelection转换为纯文本字符串的方法。
PS: document.getSelection()returns the plain-text string not even a nsISelection.
PS：document.getSelection()返回纯文本字符串甚至不是nsISelection.
回答by Tim Down
Take a look at the DOM Range spec. You can get a Rangefrom the user selection in Firefox using:
查看DOM Range 规范。您可以使用以下方法Range从 Firefox 中的用户选择中获取：
var range = window.getSelection().getRangeAt(0);
Note that some browsers, including Firefox, allow multiple selections, which can be accessed via the getRangeAt()method of the selection.
注意一些浏览器，包括火狐，允许多选，可以通过getRangeAt()选择的方法来访问。
The Rangeis expressed in terms of DOM nodes and offsets within those nodes. Once you've got your Range, it's not straightforward to do exactly what you want, since the range's boundaries could be in different nodes at different levels of the DOM tree, so simply surrounding the Range's content with a tag is not always possible. You may be able to do something like the following, although it will create a new block element to contain the selected content:
将Range在这些节点中的DOM节点和偏移量来表示。一旦你得到了你的Range，就不能简单地做你想做的事情，因为范围的边界可能在 DOM 树的不同级别的不同节点中，所以简单地用标签包围范围的内容并不总是可行的。您可能可以执行以下操作，但它会创建一个新的块元素来包含所选内容：
var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
var div = document.createElement("div");
div.style.color = "yellow";
div.appendChild(selectionContents);
range.insertNode(div);
Another, hacky, alternative is to use the execCommand()method of documentto modify the selection (e.g. by setting it to a particular colour) and then using document.querySelectorAllor some selector library to select elements with that colour and then apply styling to them.
另一个，hacky，替代方法是使用修改选择的execCommand()方法document（例如通过将其设置为特定颜色），然后使用document.querySelectorAll或 某些选择器库来选择具有该颜色的元素，然后对它们应用样式。
回答by rosscj2533
Tim Down's answer is on the right track. However one issue is that extractContents() will remove the selection from the dom. You can use
蒂姆唐的答案是正确的。然而，一个问题是 extractContents() 将从 dom 中删除选择。您可以使用
window.getSelection().getRangeAt(0).cloneContents();
to just get a copy of what's selected. You could then wrap that with your new tag and then replace the selection with it. Tim Down's concern about the range spanning multiple HTML elements is certainly a valid one. I think once you get the range, it 'fixes' up the html, but when you put it back in it could cause problems. Here's a good resource on the Range object.
只需获取所选内容的副本。然后你可以用你的新标签包装它，然后用它替换选择。Tim Down 对跨越多个 HTML 元素的范围的担忧当然是有道理的。我认为一旦你获得了范围，它就会“修复”html，但是当你把它放回去时可能会导致问题。 这是关于 Range 对象的一个很好的资源。
回答by Dave Roma
window.getSelection() will return an object. You can use the returned selection object as a string by calling the objects .toString() method.
window.getSelection() 将返回一个对象。您可以通过调用对象的 .toString() 方法将返回的选择对象用作字符串。
var selObj = window.getSelection();
var selectedText = selObj.toString();
