你可能不知道的JS关于选中文本区域的操作

lauren_liuling 发布于2019-08-26 10:23 / 748人阅读

摘要：先普及一些关于文本选择范围的基础知识。可以调用的方法，结果就会打印出我们选择的文本内容。用脚本可以实现中包含多个的情况。表示当前范围是否是闭合的。则表示当前范围的起始和结束是同一个位置。表示共同的祖先节点。

声明：今天所分享的内容，都可以直接在控制台演示。
先来思考几个问题。
1.我在一个页面中随意点了一下，没有留下任何痕迹。你能捕捉到我刚才点的是哪个节点，以及鼠标的落脚点在哪两个字之间吗（点击图片是无效的，本文只讨论文本的情况）？
2.如何做到点击任意节点，选中并且复制任意一段文字呢？
3.如何用脚本控制你用鼠标选中的区域呢（控制所选范围的大小，起始位置）？

上面三个问题，你能答出几道？这几个问题都是跟当前选择区域相关的知识点，这里我们合并在一起讲一下。先普及一些关于文本选择范围的基础知识。主要涉及到两个对象，Selection和Range。可以理解成Selection由Range组成，Selection表示当前页面中鼠标选中的区域对象，可以用window.getSelection()来获取Selection对象，你可以用鼠标在当前页选取一个范围，然后打开控制台，输入window.getSelection()即可打印出Selection对象。可以调用selection的toString方法，结果就会打印出我们选择的文本内容。

let selection = window.getSelection();
console.log(selection.toString());

selection有一个rangeCount属性，用来判断当前选择区域有多少个range，重点来了：当进入一个网页，或者刷新当前页之后，如果你没有点击过任何地方，则selection的rangeCount值为0，一旦你点击过任何地方，此时rangCount的值就变成了1（此时你就可以打开控制台在控制台测试了）。所以这就可以用来判断当前页有没有被点击过。

let selection = window.getSelection();
if (selection.rangeCount == 0) {
  console.log("当前页面还没有被点击过");
} else {
  console.log("当前页面已经被点击过");
// 获取当前selection中的range。（在网页中通过手动去选择范围只能有一个range。用脚本可以实现selection中包含多个range的情况。）
  let range = selection.getRangeAt(0); 
}

当我们知道当前页面被点击过之后，就可以来判断是哪个节点被点击了。点击了哪两个字的中间。此时就会用到几个range的属性，分别是startContainer,endContainer,startOffset,endOffset.先来看控制台打印出来的几个range的属性。

collapsed：表示当前range范围是否是闭合的。true则表示当前range范围的起始和结束是同一个位置。其实就是当前页面上没有被选择的范围。也可以认为当前选择范围是一个点。
commonAncestorContainer: 表示共同的祖先节点。如果当前选择范围是跨节点的，即我的开始点是在上一个div，结束点在他的兄弟节点div中。那此时commonAncestorContainer就表示他俩的父节点（最近的公共祖先节点）。如果开始点和结束点在同一个div中，则此属性的值指向当前div。
startContainer/endContainer: 范围起始点和结束点所在的节点中。
startOffset/endOffset: 范围起始点和结束点在当前container中的偏移量，即在startContainer(或endContainer)中，起始点（或结束点）前面有多少个字。

结合上面的四个属性，我们就能轻易的找到刚才点击的哪个位置，（如果只是点击一下的话，collapsed值为true，startContainer和endContainer相同，startOffset和endOffset相等）到这里，我们开篇提到的第一个问题就解决了。
第一个问题理解了之后，后面的两个就变的很简单了。我们先来看第三个，只是用range的几个方法。设置一下range的边界值即可。

setStartAfter()
setStartBefore()
setEndAfter()
setEndBefore()
// 上面这四个方法是设置range范围的起始和结束位置的，参数传入节点即可。
setStart()
setEnd()
// 上面这两个方法有两个参数，第一个传入节点，第二个传入偏移量，即从当前节点的第几个字开始。注意：这里的节点指的是文本节点（nodeType是3的text节点）。

下面看第二个问题。首先选中一段文字，然后执行复制命令。

// 选中一段文字
let div = document.getElementById("div");
let selection = window.getSelection();
let range = document.createRange();
range.selectNode(div);
selection.removeAllRanges();
selection.addRange(range);
// 执行复制命令
document.execCommand("copy", false, null);

这里用到了一个很好用的方法，document.execCommand()，感兴趣的朋友自己下来查一下吧。
不管你是小哥哥还是小姐姐，觉得东西不错？给个赞再走吧！

GPU云服务器云服务器可能不知道地方多行文本区 java文本区复制 html文本区域框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106094.html

你可能不知道的JS关于选中文本区域的操作

摘要：先普及一些关于文本选择范围的基础知识。可以调用的方法，结果就会打印出我们选择的文本内容。用脚本可以实现中包含多个的情况。表示当前范围是否是闭合的。则表示当前范围的起始和结束是同一个位置。表示共同的祖先节点。声明：今天所分享的内容，都可以直接在控制台演示。先来思考几个问题。1.我在一个页面中随意点了一下，没有留下任何痕迹。你能捕捉到我刚才点的是哪个节点，以及鼠标的落脚点在哪两个字之间吗...

0xE7A38A 2019-08-02 15:39 评论0 收藏0
[译]OpenCV OCR and text recognition with Tesseract

摘要：纳入深度学习模型来进一步提升准确率只是时间问题，事实上，这个时间已经到来。最新版本支持基于深度学习的，准确率显著提高。该函数使用基于深度学习的文本检测器来检测不是识别图像中的文本区域。高效使用概率最高的文本区域，删除其他重叠区域。 By Adrian Rosebrock on September 17, 2018 in Deep Learning, Optical Character ...

gnehc 2019-07-31 10:11 评论0 收藏0
[译]OpenCV Text Detection (EAST text detector)

摘要：的文本检测器是一种基于新颖架构和训练模式的深度学习模型。深度学习文本检测器图文本检测全卷积网络的结构等人的图。随着和的发布，我们现在可以使用一种名为的基于深度学习的文本检测器，它基于等人的年论文一种高效精确的场景文本检测器。 by Adrian Rosebrock on August 20, 2018 in Deep Learning, Optical Character Recogn...

VincentFF 2019-07-31 10:12 评论0 收藏0
Android控件之TextView全解析

摘要：设置控件中内容的位置，如上表示居中。为文本指定输入法，需要完全限定名完整的包名。在指定的情况下，设置重复滚动的次数，当设置为时表示无限次。限制显示的文本长度，超出部分不显示。前言大家好！在前几篇文章里，我们详细介绍了Android中的常用布局，使大家对Android中的页面布局有了一定认识，而对于布局中使用的一些UI控件如Button、TextView等，有的读者可能还存在一些困惑...

jsdt 2019-08-19 10:32 评论0 收藏0