选中文本分为两种情况:选中输入框中的文本和选中非输入框中的文本
1.选中输入框(text和textarea)中的文本
<!DOCTYPE html>
<html>
<head>
<title>selectText</title>
</head>
<body>
<input type="text" class="content" value="abcdefghijklmnopqrstuvwxyz" />
<br />
<button class="button">选中第5个字到第10个字之间的内容</button>
<script type="text/javascript">
var content=document.querySelector(".content");
var button=document.querySelector(".button");
button.addEventListener("click",function(){
content.focus(); //将焦点定位到content元素
content.setSelectionRange(5,9); //选中文本
});
</script>
</body>
</html>
2.选中非输入框中的文本
<!DOCTYPE html>
<html>
<head>
<title>selectText</title>
</head>
<body>
<span class="content">abcdefghijklmnopqrstuvwxyz</span>
<br />
<button class="button">选中第5个字到第10个字之间的内容</button>
<script type="text/javascript">
var content=document.querySelector(".content");
var button=document.querySelector(".button");
button.addEventListener("click",function(){
var range=document.createRange(); //创建一个包含节点和文本节点的部分的文档的片段
range.setStart(content.firstChild,5); //设置片段的起始位置
range.setEnd(content.firstChild,9); //设置片段的终点位置
var selection2 = window.getSelection(); //获取用户选择的文本范围
selection2.removeAllRanges(); //清空用户选择的文本范围
selection2.addRange(range); //将之前获得的片段添加到用户选择的文本范围
});
</script>
</body>
</html>