如何使用 JavaScript 获取选中的 HTML 文本？-JavaScript中文网-JavaScript教程资源分享门户

在 web 开发中，有时需要获取用户选择的文本。对于纯文本，可以直接调用 window.getSelection() 方法来获取。但是如果需要获取选中的 HTML 文本，该怎么办呢？本文将介绍如何使用 JavaScript 获取选中的 HTML 文本。

前置知识

在学习本文之前，需要掌握以下知识：

熟悉 JavaScript 基础语法；
知道 DOM 是什么，并熟悉 DOM 操作；
了解 Range 对象。

获取选中的 HTML 文本

要获取选中的 HTML 文本，可以借助浏览器提供的 Selection 和 Range 对象。具体步骤如下：

获取当前选区（Selection）对象。
```
const selection = window.getSelection();
```

判断选区是否存在且非空。

if (selection && !selection.isCollapsed) {
  // 此处为后续操作的逻辑代码
}

获取当前选区（Selection）所在的范围（Range）对象。
```
const range = selection.getRangeAt(0);
```

将范围（Range）对象转换为 HTML 文本。

const container = document.createElement("div");
container.appendChild(range.cloneContents());
const htmlText = container.innerHTML;

至此，我们成功获取了选中的 HTML 文本。

示例代码

下面是一个完整的示例代码，可以复制到浏览器控制台中执行：

-- -------------------- ---- -------
-- --------
------------------------------------ -- -- -
  -- --------
  ----- --------- - ----------------------
  -- ---------
  -- ---------- -- ----------------------- -
    -- ------------
    ----- ----- - ------------------------
    -- --- ---- --
    ----- --------- - ------------------------------
    ---------------------------------------------
    ----- -------- - --------------------
    ----------------------
  -
---

总结

本文介绍了如何使用 JavaScript 获取选中的 HTML 文本。希望读者通过学习本文，能够更好地理解 Selection 和 Range 对象，并能够在实际开发中灵活应用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/27212