資訊專欄INFORMATION COLUMN
摘要：先普及一些關(guān)于文本選擇范圍的基礎(chǔ)知識?？梢哉{(diào)用的方法，結(jié)果就會打印出我們選擇的文本內(nèi)容。用腳本可以實現(xiàn)中包含多個的情況。表示當前范圍是否是閉合的。則表示當前范圍的起始和結(jié)束是同一個位置。表示共同的祖先節(jié)點。
聲明：今天所分享的內(nèi)容，都可以直接在控制臺演示。
先來思考幾個問題。
1.我在一個頁面中隨意點了一下，沒有留下任何痕跡。你能捕捉到我剛才點的是哪個節(jié)點，以及鼠標的落腳點在哪兩個字之間嗎（點擊圖片是無效的，本文只討論文本的情況）？
2.如何做到點擊任意節(jié)點，選中并且復(fù)制任意一段文字呢？
3.如何用腳本控制你用鼠標選中的區(qū)域呢（控制所選范圍的大小，起始位置）？
上面三個問題，你能答出幾道？這幾個問題都是跟當前選擇區(qū)域相關(guān)的知識點，這里我們合并在一起講一下。先普及一些關(guān)于文本選擇范圍的基礎(chǔ)知識。主要涉及到兩個對象，Selection和Range?？梢岳斫獬蒘election由Range組成，Selection表示當前頁面中鼠標選中的區(qū)域?qū)ο?，可以用window.getSelection()來獲取Selection對象，你可以用鼠標在當前頁選取一個范圍，然后打開控制臺，輸入window.getSelection()即可打印出Selection對象?？梢哉{(diào)用selection的toString方法，結(jié)果就會打印出我們選擇的文本內(nèi)容。
let selection = window.getSelection(); console.log(selection.toString());
selection有一個rangeCount屬性，用來判斷當前選擇區(qū)域有多少個range，重點來了：當進入一個網(wǎng)頁，或者刷新當前頁之后，如果你沒有點擊過任何地方，則selection的rangeCount值為0，一旦你點擊過任何地方，此時rangCount的值就變成了1（此時你就可以打開控制臺在控制臺測試了）。所以這就可以用來判斷當前頁有沒有被點擊過。
let selection = window.getSelection();
if (selection.rangeCount == 0) {
console.log("當前頁面還沒有被點擊過");
} else {
console.log("當前頁面已經(jīng)被點擊過");
// 獲取當前selection中的range。（在網(wǎng)頁中通過手動去選擇范圍只能有一個range。用腳本可以實現(xiàn)selection中包含多個range的情況。）
let range = selection.getRangeAt(0);
}
當我們知道當前頁面被點擊過之后，就可以來判斷是哪個節(jié)點被點擊了。點擊了哪兩個字的中間。此時就會用到幾個range的屬性，分別是startContainer,endContainer,startOffset,endOffset.先來看控制臺打印出來的幾個range的屬性。
collapsed：表示當前range范圍是否是閉合的。true則表示當前range范圍的起始和結(jié)束是同一個位置。其實就是當前頁面上沒有被選擇的范圍。也可以認為當前選擇范圍是一個點。 commonAncestorContainer: 表示共同的祖先節(jié)點。如果當前選擇范圍是跨節(jié)點的，即我的開始點是在上一個div，結(jié)束點在他的兄弟節(jié)點div中。那此時commonAncestorContainer就表示他倆的父節(jié)點（最近的公共祖先節(jié)點）。如果開始點和結(jié)束點在同一個div中，則此屬性的值指向當前div。 startContainer/endContainer: 范圍起始點和結(jié)束點所在的節(jié)點中。 startOffset/endOffset: 范圍起始點和結(jié)束點在當前container中的偏移量，即在startContainer(或endContainer)中，起始點（或結(jié)束點）前面有多少個字。
結(jié)合上面的四個屬性，我們就能輕易的找到剛才點擊的哪個位置，（如果只是點擊一下的話，collapsed值為true，startContainer和endContainer相同，startOffset和endOffset相等）到這里，我們開篇提到的第一個問題就解決了。
第一個問題理解了之后，后面的兩個就變的很簡單了。我們先來看第三個，只是用range的幾個方法。設(shè)置一下range的邊界值即可。
setStartAfter() setStartBefore() setEndAfter() setEndBefore() // 上面這四個方法是設(shè)置range范圍的起始和結(jié)束位置的，參數(shù)傳入節(jié)點即可。 setStart() setEnd() // 上面這兩個方法有兩個參數(shù)，第一個傳入節(jié)點，第二個傳入偏移量，即從當前節(jié)點的第幾個字開始。注意：這里的節(jié)點指的是文本節(jié)點（nodeType是3的text節(jié)點）。
下面看第二個問題。首先選中一段文字，然后執(zhí)行復(fù)制命令。
// 選中一段文字
let div = document.getElementById("div");
let selection = window.getSelection();
let range = document.createRange();
range.selectNode(div);
selection.removeAllRanges();
selection.addRange(range);
// 執(zhí)行復(fù)制命令
document.execCommand("copy", false, null);
這里用到了一個很好用的方法，document.execCommand()，感興趣的朋友自己下來查一下吧。
不管你是小哥哥還是小姐姐，覺得東西不錯？給個贊再走吧！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54274.html
摘要：先普及一些關(guān)于文本選擇范圍的基礎(chǔ)知識。可以調(diào)用的方法，結(jié)果就會打印出我們選擇的文本內(nèi)容。用腳本可以實現(xiàn)中包含多個的情況。表示當前范圍是否是閉合的。則表示當前范圍的起始和結(jié)束是同一個位置。表示共同的祖先節(jié)點。 聲明：今天所分享的內(nèi)容，都可以直接在控制臺演示。先來思考幾個問題。1.我在一個頁面中隨意點了一下，沒有留下任何痕跡。你能捕捉到我剛才點的是哪個節(jié)點，以及鼠標的落腳點在哪兩個字之間嗎...
摘要：納入深度學(xué)習(xí)模型來進一步提升準確率只是時間問題，事實上，這個時間已經(jīng)到來。最新版本支持基于深度學(xué)習(xí)的，準確率顯著提高。該函數(shù)使用基于深度學(xué)習(xí)的文本檢測器來檢測不是識別圖像中的文本區(qū)域。高效使用概率最高的文本區(qū)域，刪除其他重疊區(qū)域。 By Adrian Rosebrock on September 17, 2018 in Deep Learning, Optical Character ...
摘要：的文本檢測器是一種基于新穎架構(gòu)和訓(xùn)練模式的深度學(xué)習(xí)模型。深度學(xué)習(xí)文本檢測器圖文本檢測全卷積網(wǎng)絡(luò)的結(jié)構(gòu)等人的圖。隨著和的發(fā)布，我們現(xiàn)在可以使用一種名為的基于深度學(xué)習(xí)的文本檢測器，它基于等人的年論文一種高效精確的場景文本檢測器。 by Adrian Rosebrock on August 20, 2018 in Deep Learning, Optical Character Recogn...
摘要：設(shè)置控件中內(nèi)容的位置，如上表示居中。為文本指定輸入法，需要完全限定名完整的包名。在指定的情況下，設(shè)置重復(fù)滾動的次數(shù)，當設(shè)置為時表示無限次。限制顯示的文本長度，超出部分不顯示。 前言 大家好！在前幾篇文章里，我們詳細介紹了Android中的常用布局，使大家對Android中的頁面布局有了一定認識，而對于布局中使用的一些UI控件如Button、TextView等，有的讀者可能還存在一些困惑...
閱讀 3926·2021-11-18 13:19
閱讀 1179·2021-10-11 10:58
閱讀 3290·2019-08-29 16:39
閱讀 3140·2019-08-26 12:08
閱讀 2034·2019-08-26 11:33
閱讀 2459·2019-08-23 18:30
閱讀 1307·2019-08-23 18:21
閱讀 2522·2019-08-23 18:18
