你可能不知道的JS關于選中文本區域的操作

lauren_liuling 發布于2019-08-26 10:23 / 746人閱讀

摘要：先普及一些關于文本選擇范圍的基礎知識。可以調用的方法，結果就會打印出我們選擇的文本內容。用腳本可以實現中包含多個的情況。表示當前范圍是否是閉合的。則表示當前范圍的起始和結束是同一個位置。表示共同的祖先節點。

聲明：今天所分享的內容，都可以直接在控制臺演示。
先來思考幾個問題。
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文本區域框

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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