获取选中文本

2025-04-01 | 0 浏览 | 0 评论

获取选中文本

获取选中文本可以通过 JavaScript 的 window.getSelection() 方法来实现。这个方法返回一个 Selection 对象，它包含了当前文档中选定的文本信息。你可以从这个对象中获取选定的范围，并从中提取出选定的文本。

下面是一个简单的示例，展示了如何获取用户选定的文本，并将其输出到控制台或页面上的某个元素中：

HTML 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取选中文本</title>
</head>
<body>

<p>选择一些文本来看看效果。</p>
<div id="output"></div>

<script>
    document.addEventListener('mouseup', function() {
        var selectedText = getSelectedText();
        console.log(selectedText); // 输出到控制台
        document.getElementById('output').textContent = selectedText; // 显示在页面上
    });

    function getSelectedText() {
        var selection = window.getSelection();
        if (selection.rangeCount > 0) {
            var range = selection.getRangeAt(0);
            return range.toString();
        }
        return '';
    }
</script>
</body>
</html>

解释：

HTML 部分：
- 页面中有一个 <p> 标签，用户可以选择其中的文本。
- 页面中还有一个 <div> 标签，用于显示选定的文本。
JavaScript 部分：
- 监听 mouseup 事件，这是用户完成文本选择的标志。
- 调用 getSelectedText() 函数来获取选定的文本。
- 将选定的文本输出到控制台，并显示在页面上的 <div> 中。
getSelectedText 函数：
- 使用 window.getSelection() 获取当前的 Selection 对象。
- 检查 selection.rangeCount 是否大于 0，以确保有选定的范围。
- 使用 selection.getRangeAt(0) 获取选定的第一个范围。
- 使用 range.toString() 获取选定范围内的文本字符串。
- 返回选定的文本字符串。

这个示例展示了如何在用户完成文本选择后获取选定的文本，并将其显示在页面上或记录在控制台中。你可以根据需要调整输出的位置或方式。

笔记