JavaScript 如何获取被高亮/选择的文本

JavaScript 如何获取被高亮/选择的文本

可能需要找出用户选择/高亮的文本。使用窗口对象和文档对象及其属性可以很容易地完成这个操作。处理选择的文本在不同的浏览器中是不同的。下面是获取选择文本的方法:

方法1:window.getSelection属性

window.getSelection方法返回一个代表用户或插入符位置所选择的文本的选择对象。

语法:

function selection(){
if (window.getSelection)
       return window.getSelection();
}

方法2:document.getSelection属性

该方法返回一个表示用户所选文本的选择对象,属于document接口的一部分。

语法:

function selection(){
if (document.getSelection)
       return document.getSelection();
}

方法3:document.selection属性

该方法还返回一个选择对象,该对象显示用户选择的文本。

语法:

function selection(){
if (document.selection)
       return document.selection.createRange().text;;
}

是时候尝试一下代码了。运行代码,选择一个文本,然后按下按钮以显示所选文本:

示例: 在此示例中,我们将使用三种方法来获取已高亮或选定的文本。

<h1 style=color:green>
    GeeksforGeeks
</h1>
 
<p>Select any part of this sentence
    and press the button</p>
 
<!--Button to invoke the
        function to get the selected text-->
<input type="button"
       value="Get Selection"
       onmousedown="getSelectedText()">
 
<!--Form to show the selected text as output-->
<form name="testform">
    <textarea name="selectedtext"
              rows="5"
              cols="20">
    </textarea>
</form>
<script>
    // Function to get the Selected Text
    function getSelectedText() {
        var selectedText = '';
 
        // window.getSelection
        if (window.getSelection) {
            selectedText = window.getSelection();
        }
        // document.getSelection
        else if (document.getSelection) {
            selectedText = document.getSelection();
        }
        // document.selection
        else if (document.selection) {
            selectedText =
                document.selection.createRange().text;
        } else return;
        // To write the selected text into the textarea
        document.testform.selectedtext.value = selectedText;
    }
</script>

输出:

JavaScript 如何获取被高亮/选择的文本

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程