Maison > interface Web > js tutoriel > Comment obtenir la phrase où se trouve le texte sélectionné en utilisant Javascript

Comment obtenir la phrase où se trouve le texte sélectionné en utilisant Javascript

亚连
Libérer: 2018-06-22 17:58:48
original
1528 Les gens l'ont consulté

这篇文章主要给大家爱介绍了关于利用Javascript获取选择文本所在的句子的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧。

前言

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

原理分析

获取选择文本

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

锚节点与焦节点

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

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

当然不会这么简单哈stuck_out_tongue。

强调一下

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

<strong>Saladict</strong> is awesome!
Copier après la connexion

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

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

Saladict is <strong><a href="#" rel="external nofollow" >awesome</a></strong>!
Copier après la connexion

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

遍历到哪?

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

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

原理总结

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

实现

选择文本

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

const selection = window.getSelection()
const selectedText = selection.toString()
if (!selectedText.trim()) { return &#39;&#39; }
Copier après la connexion

获取首部

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

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

let sentenceHead = &#39;&#39;
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) || [&#39;&#39;])[0]
}
Copier après la connexion

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

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

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

获取尾部

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

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

压缩换行

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

return (sentenceHead + selectedText + sentenceTail)
 .replace(/(^\s+)|(\s+$)/gm, &#39;\n&#39;) // allow one empty line & trim each line
 .replace(/(^\s+)|(\s+$)/g, &#39;&#39;) // remove heading or tailing \n
Copier après la connexion

完整代码

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

/**
* @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, &#39;\n&#39;) // allow one empty line & trim each line
 .replace(/(^\s+)|(\s+$)/g, &#39;&#39;) // remove heading or tailing \n
}
Copier après la connexion

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在ReactNative中如何使用Redux架构

在javascript中如何实现显式转换与隐式转换

在JavaScript中如何实现观察者模式

有关Angular2开发环境搭建(详细教程)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal