window.getSelection() 给了我选定的文本，但我想要 HTML
[英]window.getSelection() gives me the selected text, but I want the HTML
问题描述
I'm extending a WYSIWYG HTML editor (for Firefox), I want to add tags around a selection.
我正在扩展 WYSIWYG HTML 编辑器（用于 Firefox），我想在选择周围添加标签。 I can't find a function to accomplish this in the Mozilla Midas specification .我在Mozilla Midas 规范中找不到实现此功能的功能。
There is a command to replace the selection with HTML.有一个命令可以用 HTML 替换选择。
So if I could read the selection contents, I could add my tags to this string.因此，如果我可以阅读选择内容，我可以将我的标签添加到该字符串中。
window.getSelection() almost works, but it gives me nsISelection which 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 。
4 个解决方案
解决方案1
46 2010-01-26 13:58:12
Take a look at the DOM Range spec .看看DOM Range 规范。 You can get a Range from the user selection in Firefox using:您可以使用以下方法从 Firefox 中的用户选择中获取Range ：
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.请注意，包括 Firefox 在内的某些浏览器允许多选，可以通过选择的getRangeAt()方法访问。
The Range is expressed in terms of DOM nodes and offsets within those nodes. Range以 DOM 节点和这些节点内的偏移量表示。 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.一旦你有了Range ，就不能简单地做你想做的事，因为范围的边界可能在 DOM 树的不同级别的不同节点中，所以简单地用标签包围 Range 的内容并不总是可能的。 You may be able to do something like the following, although it will create a new block element to contain the selected content:您可能可以执行以下操作，尽管它会创建一个新的块元素来包含所选内容：
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 document to modify the selection (eg by setting it to a particular colour) and then using document.querySelectorAll or some selector library to select elements with that colour and then apply styling to them.另一种，hacky，替代方法是使用document的execCommand()方法来修改选择（例如，通过将其设置为特定颜色），然后使用document.querySelectorAll或某些选择器库来选择具有该颜色的元素，然后将样式应用于他们。
解决方案2
15 2010-01-26 14:20:47
Tim Down's answer is on the right track. Tim Down 的答案是正确的。 However one issue is that extractContents() will remove the selection from the dom.然而，一个问题是 extractContents() 将从 dom 中删除选择。 You can use您可以使用
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. Tim Down 对跨越多个 HTML 元素的范围的担忧当然是有道理的。 I think once you get the range, it 'fixes' up the html, but when you put it back in it could cause problems.我认为一旦你得到范围，它就会“修复”html，但是当你把它放回去时，它可能会导致问题。 Here 'sa good resource on the Range object.这是 Range 对象的一个很好的资源。
解决方案3
6 2011-11-20 03:32:07
window.getSelection() will return an object. window.getSelection() 将返回一个对象。 You can use the returned selection object as a string by calling the objects .toString() method.您可以通过调用 objects .toString() 方法将返回的选择对象用作字符串。
var selObj = window.getSelection();
var selectedText = selObj.toString();
https://developer.mozilla.org/en/DOM/window.getSelection https://developer.mozilla.org/en/DOM/window.getSelection
解决方案4
0 2022-06-10 15:12:12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select content of particular element</title>
</head>
<body>
<div id="div">This is the div tag</div>
<p>this is the paragraph</p>
<button id="Btn">Button</button>
<script>
let Btn = document.getElementById("Btn");
Btn.addEventListener("click", function () {
let selection = document.getSelection();
if (selection.anchorNode.parentElement.id == "div") {
let selectionContents = document.getSelection().toString();
console.log("selected content of div id :", selectionContents)
}
else{
console.log("pls select some text")
}
})
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.