利用Javascript获取选择文本所在的句子详解


Posted in Javascript onDecember 03, 2017

前言

最近收到一个 issue 期望能在划词的时候同时保存单词的上下文和来源网址。这个功能其实很久之前就想过,但感觉不好实现一直拖延没做。真做完发现其实并不复杂,完整代码在这里,或者继续往下阅读分析。话不多说了,来一起看看详细的介绍吧。

原理分析

获取选择文本

通过 window.getSelection() 即可获得一个 Selection 对象,再利用 .toString() 即可获得选择的文本。

锚节点与焦节点

在 Selection 对象中还保存了两个重要信息,anchorNode 和 focusNode,分别代表选择产生那一刻的节点和选择结束时的节点,而 anchorOffset 和 focusOffset 则保存了选择在这两个节点里的偏移值。

这时你可能马上就想到第一个方案:这不就好办了么,有了首尾节点和偏移,就可以获取句子的头部和尾部,再把选择文本作为中间,整个句子不就出来了么。

当然不会这么简单哈stuck_out_tongue。

强调一下

一般情况下,anchorNode 和 focusNode 都是 Text 节点(而且因为这里处理的是文本,所以其它情况也会直接忽略),可以考虑这种情况:

<strong>Saladict</strong> is awesome!

如果选择的是“awesome”,那么 anchorNode 和 focusNode 都是 is awesome!,所以取不到前面的 “Saladict”。

另外还有嵌套的情况,也是同样的问题。

Saladict is <strong><a href="#" rel="external nofollow" >awesome</a></strong>!

所以我们还需要遍历兄弟和父节点来获取完整的句子。

遍历到哪?

于是接下就是解决遍历边界的问题了。遍历到什么地方为止呢?我的判断标准是:跳过 inline-level 元素,遇到 block-level 元素为止。而判断一个元素是 inline-level 还是 block-level 最准确的方式应该是用 window.getComputedStyle() 。但我认为这么做太重了,也不需要严格的准确性,所以用了常见的 inline 标签来判断。

const INLINE_TAGS = new Set([
 // Inline text semantics
 'a', 'abbr', 'b', 'bdi', 'bdo', 'br', 'cite', 'code', 'data', 'dfn', 'em', 'i',
 'kbd', 'mark', 'q', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'small',
 'span', 'strong', 'sub', 'sup', 'time', 'u', 'var', 'wbr'
])

原理总结

句子由三块组成,选择文本作为中间,然后遍历兄弟和父节点获取首尾补上。

实现

选择文本

先获取文本,如果没有则退出

const selection = window.getSelection()
const selectedText = selection.toString()
if (!selectedText.trim()) { return '' }

获取首部

对于 anchorNode 只考虑 Text 节点,通过 anchorOffset 获取选择在 anchorNode 的前半段内容。

然后开始补全在 anchorNode 之前的兄弟节点,最后补全在 anchorNode 父元素之前的兄弟元素。注意后面是元素,这样可以减少遍历的次数,而且考虑到一些被隐藏的内容不需要获取,用 innerText 而不是 textContent 属性。

let sentenceHead = ''
const anchorNode = selection.anchorNode
if (anchorNode.nodeType === Node.TEXT_NODE) {
 let leadingText = anchorNode.textContent.slice(0, selection.anchorOffset)
 for (let node = anchorNode.previousSibling; node; node = node.previousSibling) {
 if (node.nodeType === Node.TEXT_NODE) {
 leadingText = node.textContent + leadingText
 } else if (node.nodeType === Node.ELEMENT_NODE) {
 leadingText = node.innerText + leadingText
 }
 }

 for (
 let element = anchorNode.parentElement;
 element && INLINE_TAGS.has(element.tagName.toLowerCase()) && element !== document.body;
 element = element.parentElement
 ) {
 for (let el = element.previousElementSibling; el; el = el.previousElementSibling) {
 leadingText = el.innerText + leadingText
 }
 }

 sentenceHead = (leadingText.match(sentenceHeadTester) || [''])[0]
}

最后从提取句子首部用的正则是这个

// match head   a.b is ok chars that ends a sentence
const sentenceHeadTester = /((\.(?![ .]))|[^.?!。?!…\r\n])+$/

前面的 ((\.(?![ .])) 主要是为了跳过 a.b 这样的特别是在技术文章中常见的写法。

获取尾部

跟首部同理,换成往后遍历。最后的正则保留了标点符号

// match tail       for "..."
const sentenceTailTester = /^((\.(?![ .]))|[^.?!。?!…\r\n])+(.)\3{0,2}/

压缩换行

拼凑完句子之后压缩多个换行为一个空白行,以及删除每行开头结尾的空白符

return (sentenceHead + selectedText + sentenceTail)
 .replace(/(^\s+)|(\s+$)/gm, '\n') // allow one empty line & trim each line
 .replace(/(^\s+)|(\s+$)/g, '') // remove heading or tailing \n

完整代码

const INLINE_TAGS = new Set([
 // Inline text semantics
 'a', 'abbr', 'b', 'bdi', 'bdo', 'br', 'cite', 'code', 'data', 'dfn', 'em', 'i',
 'kbd', 'mark', 'q', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'small',
 'span', 'strong', 'sub', 'sup', 'time', 'u', 'var', 'wbr'
])

/**
* @returns {string}
*/
export function getSelectionSentence () {
 const selection = window.getSelection()
 const selectedText = selection.toString()
 if (!selectedText.trim()) { return '' }

 var sentenceHead = ''
 var sentenceTail = ''

 const anchorNode = selection.anchorNode
 if (anchorNode.nodeType === Node.TEXT_NODE) {
 let leadingText = anchorNode.textContent.slice(0, selection.anchorOffset)
 for (let node = anchorNode.previousSibling; node; node = node.previousSibling) {
 if (node.nodeType === Node.TEXT_NODE) {
 leadingText = node.textContent + leadingText
 } else if (node.nodeType === Node.ELEMENT_NODE) {
 leadingText = node.innerText + leadingText
 }
 }

 for (
 let element = anchorNode.parentElement;
 element && INLINE_TAGS.has(element.tagName.toLowerCase()) && element !== document.body;
 element = element.parentElement
 ) {
 for (let el = element.previousElementSibling; el; el = el.previousElementSibling) {
 leadingText = el.innerText + leadingText
 }
 }

 sentenceHead = (leadingText.match(sentenceHeadTester) || [''])[0]
 }

 const focusNode = selection.focusNode
 if (selection.focusNode.nodeType === Node.TEXT_NODE) {
 let tailingText = selection.focusNode.textContent.slice(selection.focusOffset)
 for (let node = focusNode.nextSibling; node; node = node.nextSibling) {
 if (node.nodeType === Node.TEXT_NODE) {
 tailingText += node.textContent
 } else if (node.nodeType === Node.ELEMENT_NODE) {
 tailingText += node.innerText
 }
 }

 for (
 let element = focusNode.parentElement;
 element && INLINE_TAGS.has(element.tagName.toLowerCase()) && element !== document.body;
 element = element.parentElement
 ) {
 for (let el = element.nextElementSibling; el; el = el.nextElementSibling) {
 tailingText += el.innerText
 }
 }

 sentenceTail = (tailingText.match(sentenceTailTester) || [''])[0]
 }

 return (sentenceHead + selectedText + sentenceTail)
 .replace(/(^\s+)|(\s+$)/gm, '\n') // allow one empty line & trim each line
 .replace(/(^\s+)|(\s+$)/g, '') // remove heading or tailing \n
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
详细分析React 表单与事件
Jul 08 Javascript
OpenLayer学习之自定义测量控件
Sep 28 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 #Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 #Javascript
Angular之toDoList的实现代码示例
Dec 02 #Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 #Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 #Javascript
Vue按需加载的具体实现
Dec 02 #Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 #Javascript
You might like
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
关于this和self的使用说明
2010/08/01 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
什么是python的列表推导式
2020/05/26 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
揠苗助长教学反思
2014/02/04 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
会计求职自荐信
2015/03/26 职场文书
中秋节感想
2015/08/10 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS