关于js选中文字

//  获取选中的文字
var txt =  window.getSelection() 
alert(txt) // alert默认调用了toString()

//  清除选中的文字
window.getSelection().removeAllRanges()


选中文本相关

<body>
<p>这是一段默认被选中的文本</p>
<p>这是一段默认有开始截止位置的文本</p>
<div>
    <span>太阳当空照,<br></span>
    <span>花儿对我笑。<br></span>
    <span>小鸟说:“早,早,早,<br></span>
    <span>你为什么背上小书包?”<br></span>
    <span>我去上学校,<br></span>
    <span>天天不迟到。<br></span>
    <span>爱学习,爱劳动,<br></span>
    <span>长大要为祖国立功劳。<br></span>
</div>
</body>
  1. 设置文字选中效果
var range = document.createRange()
referenceNode = document.getElementsByTagName('p').item(0)
range.selectNodeContents(referenceNode)
var selection = window.getSelection()
selection.removeAllRanges()
selection.addRange(range)
image.png
  1. 设置开始截止位置选中
//可用nodeType判断,如果起始节点类型是 Text, Comment, or CDATASection之一, 那么 startOffset指的是从起始节点算起字符的偏移量。
var range2 = document.createRange()
var startNode = document.getElementsByTagName('p').item(1).firstChild
var startOffset = 1
range2.setStart(startNode, startOffset)
var endOffset = 7
range2.setEnd(startNode, endOffset)
var selection2 = window.getSelection()
selection2.removeAllRanges()
selection2.addRange(range2)
image.png
  1. 跨段选中
// 对于其他 Node 类型节点, startOffset 是指从起始结点开始算起子节点的偏移量。
var range2 = document.createRange()
var startNode = document.getElementsByTagName('div').item(0)
//childNode会将html换行加进去
for (var i = 0; i < startNode.childNodes.length; i++) {
    if (startNode.childNodes[i].nodeName == '#text' && !/\s/.test(startNode.childNodes.nodeValue)) {
        startNode.removeChild(startNode.childNodes[i])
    }
}
var startOffset = 3
range2.setStart(startNode, startOffset)
var endOffset = startNode.childNodes.length - 2
range2.setEnd(startNode, endOffset)
var selection2 = window.getSelection()
selection2.removeAllRanges()
selection2.addRange(range2)
image.png
  1. 跨段文字特定位置选中
//跨段文字特定位置选中
var range2 = document.createRange()
var startNode = document.getElementsByTagName('div').item(0)
//childNode会将html换行加进去
for (var i = 0; i < startNode.childNodes.length; i++) {
    if (startNode.childNodes[i].nodeName == '#text' && !/\s/.test(startNode.childNodes.nodeValue)) {
        startNode.removeChild(startNode.childNodes[i])
    }
}
range2.setStart(startNode.childNodes[5].firstChild, 2)
range2.setEnd(startNode.childNodes[7].firstChild, 8)
var selection2 = window.getSelection()
selection2.removeAllRanges()
selection2.addRange(range2)
image.png
  1. input输入框文字选中
<input type="text"  id="text"  value="您好吗?" onfocus="getFocus()"/>

<script>
function getFocus() {
  document.getElementById("text").select()
}
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,165评论 0 0
  • 1、窗体 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 4,607评论 0 11
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,352评论 1 41
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,555评论 1 11
  • 一、表单基础知识 在 JavaScript 中,表单对应的是 HTMLFormElement 类型。 HTMLFo...
    LemonnYan阅读 959评论 0 3