Range——页面中，获取用户选择的内容

最新推荐文章于 2023-02-12 23:21:19 发布

qq_1913284695

最新推荐文章于 2023-02-12 23:21:19 发布

阅读量505

点赞数

分类专栏： html5基础

本文链接：https://blog.csdn.net/qq_21119773/article/details/51627306

版权

html5基础专栏收录该内容

68 篇文章 0 订阅

订阅专栏

在 HTML5 中，一个 Range 对象代表页面上的一段连续区域，通过 Range 对象，可以获取或修改页面上的任何区域。

主要用到的方法：document.getSelection()，getRangeAt(i)

属性：rangeCount，

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title></title>  
</head>  
<body>  
	那扇门被扭开了，瞬间，所有的气氛都变得温柔可爱了。像天使一样可亲的光芒射进雪儿的眼睛。洋洋洒洒的花瓣，如火，如蝶，从那个载满笑声的门里落下。
	<input type="button" οnclick="onc()" value="获取用户选择的内容">
	<br>
	<div id="div"></div>
</body>   
      
      
<script>  
function onc(){
	var h="";
	var div=document.getElementById("div");
	var sel=document.getSelection();//获取选择的对象，针对整个html
	if(sel.rangeCount>0){
		h="您选取的内容如下：<br>"
		for (var i = 0; i < sel.rangeCount; i++) {
			var text=sel.getRangeAt(i);//获取选择对象的文字内容
			h+="内容"+(i+1)+"：'"+text+"'<br>";
		}
		div.innerHTML=h;
	}
}
</script>  
</html>