Preface
Received a recentlyissue It is expected to save the context and source URL of the word while marking the word. This function was actually thought of a long time ago, but I felt it was not easy to implement and I kept delaying it. After doing it, I found that it is not complicated, the complete code ishere, or continue reading and analysis. Without further ado, let’s take a look at the detailed introduction.
Principle analysis
Get the selected text
pass()You can obtain a Selection object and use it.toString() You can get the selected text.
Anchor node and focus node
Two important information are also saved in the Selection object, anchorNode and focusNode, representing the node at the moment of selection and the node at the end of selection, respectively, anchorOffset and focusOffset save the offset values selected in these two nodes.
At this time, you may immediately think of the first solution: Isn’t this easy to deal with? With the head and tail nodes and offsets, you can get the head and tail of the sentence, and then use the selection text as the middle, and the whole sentence will come out.
Of course it won't be that simple, stick_out_tongue.
To emphasize
Generally speaking, anchorNode and focusNode are both Text nodes (and because text is processed here, other situations will be ignored directly). You can consider this situation:
<strong>Saladict</strong> is awesome!
If you choose "awesome", then anchorNode and focusNode are both awesome!, so the previous "Saladict" cannot be retrieved.
There is also nesting, which is the same problem.
Saladict is <strong><a href="#" rel="external nofollow" >awesome</a></strong>!
So we also need to traverse the brother and parent nodes to get the complete sentence.
Where to traverse?
So the next step is to solve the problem of traversing the boundaries. Where to go? My criterion of judgment is: skip the inline-level element and encounter the block-level element. The most accurate way to determine whether an element is inline-level or block-level should be to use(). But I think this is too heavy and does not require strict accuracy, so I used the common inline tag to judge.
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' ])
Summary of principles
The sentence consists of three pieces, select the text as the middle, and then traverse the brothers and parent nodes to get the beginning and end complement.
accomplish
Select text
Get the text first, and exit if not
const selection = ()
const selectedText = ()
if (!()) { return '' }
Get the first one
For anchorNode, only the Text node is considered, and the content selected in the first half of the anchorNode is obtained through anchorOffset.
Then start to complete the sibling nodes before anchorNode, and finally complete the sibling elements before anchorNode parent element. Note that the following elements can reduce the number of traversals, and considering that some hidden content does not need to be retrieved, use the innerText instead of the textContent property.
let sentenceHead = ''
const anchorNode =
if ( === Node.TEXT_NODE) {
let leadingText = (0, )
for (let node = ; node; node = ) {
if ( === Node.TEXT_NODE) {
leadingText = + leadingText
} else if ( === Node.ELEMENT_NODE) {
leadingText = + leadingText
}
}
for (
let element = ;
element && INLINE_TAGS.has(()) && element !== ;
element =
) {
for (let el = ; el; el = ) {
leadingText = + leadingText
}
}
sentenceHead = ((sentenceHeadTester) || [''])[0]
}
Finally, this is the rule used to extract the first part of the sentence
// match head is ok chars that ends a sentence const sentenceHeadTester = /((\.(?![ .]))|[^.?!。？！…\r\n])+$/
The previous ((\.(?![ .])) is mainly to skip this kind of writing style, especially in technical articles.
Get the tail
Same as the first one, it is replaced by traversal. The final rule retains punctuation
// match tail for "..."
const sentenceTailTester = /^((\.(?![ .]))|[^.?!。？！…\r\n])+(.)\3{0,2}/
Compress line break
After pieced together the sentence, compress multiple behaviors and one blank line, and delete the blank characters at the beginning and end of each line.
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
Complete code
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 = ()
const selectedText = ()
if (!()) { return '' }
var sentenceHead = ''
var sentenceTail = ''
const anchorNode =
if ( === Node.TEXT_NODE) {
let leadingText = (0, )
for (let node = ; node; node = ) {
if ( === Node.TEXT_NODE) {
leadingText = + leadingText
} else if ( === Node.ELEMENT_NODE) {
leadingText = + leadingText
}
}
for (
let element = ;
element && INLINE_TAGS.has(()) && element !== ;
element =
) {
for (let el = ; el; el = ) {
leadingText = + leadingText
}
}
sentenceHead = ((sentenceHeadTester) || [''])[0]
}
const focusNode =
if ( === Node.TEXT_NODE) {
let tailingText = ()
for (let node = ; node; node = ) {
if ( === Node.TEXT_NODE) {
tailingText +=
} else if ( === Node.ELEMENT_NODE) {
tailingText +=
}
}
for (
let element = ;
element && INLINE_TAGS.has(()) && element !== ;
element =
) {
for (let el = ; el; el = ) {
tailingText +=
}
}
sentenceTail = ((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
}
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.