在前端开发中，我们经常需要获取用户在网页中选择的文本内容。通常情况下，我们可以使用 window.getSelection() 方法来获取选中的文本。但是，该方法只返回选中的纯文本内容，如果我们需要获取选中文本所在的 HTML 元素和标签，则需要采用其他方式。
解决方案
要获取选中文本所在的 HTML 元素和标签，我们需要进一步处理 window.getSelection() 的返回值。具体来说，我们需要获取当前选中文本所在的范围（Range），然后从该范围中提取包含选中文本的 HTML 元素。
具体的代码实现如下所示：
-- -------------------- ---- -------
-------- ------------------ -
--- ---- - ---
-- ------- ------------------- -- ------------ -
--- --- - ----------------------
-- ---------------- -
--- --------- - ------------------------------
--- ---- - - -- --- - --------------- - - ---- ---- -
---------------------------------------------------------
-
---- - --------------------
-
- ---- -- ------- ------------------ -- ------------ -
-- ------------------------ -- ------- -
---- - ------------------------------------------
-
-
------ -----
-上述代码中，我们首先判断浏览器是否支持 window.getSelection() 方法。如果支持，我们获取当前选中的范围对象，并将其包含的内容添加到一个临时的 <div> 元素中。最后，我们返回这个 <div> 元素的 HTML 内容，即当前选中文本所在的 HTML 元素和标签。
示例
为了更好地理解上述实现方法，我们来看一个具体的示例。
假设我们有一个包含多个段落的 HTML 文档，如下所示：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------- ------- ------ --------------- --------------- --------------- ------- -------
我们可以编写以下 JavaScript 代码来监听用户在网页中的选择操作，并将选中文本所在的 HTML 元素和标签打印出来：
document.addEventListener("mouseup", function() {
var html = getSelectionHtml();
console.log(html);
});当用户在网页中选择一段文本时，控制台会输出类似于以下内容的结果：
<p>这是第二个段落。</p>
通过上述示例，我们可以看到，使用 window.getSelection() 方法结合获取范围对象的方式，我们可以轻松地获取用户选中文本所在的 HTML 元素和标签。
总结
本文介绍了如何在前端开发中获取用户选中文本所在的 HTML 元素和标签。我们通过结合使用 window.getSelection() 方法和范围对象的方式，得以获取选中文本所在的 HTML 内容。希望这篇文章能够对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31240