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>
输出: