返回句子被點擊的單詞出現在

Question

跟進上一個問題：Use Javascript to get the Sentence of a Clicked Word

我一直在摸索周圍這個問題一段時間。不過，我今天早上醒來，開始閱讀：http://branch.com/b/nba-playoffs-round-1

瞧！分支允許用戶選擇一個句子然後分享，保存等等......這正是我想要做的。看起來他們正在包裝<span>標籤中的每個句子。

以前，人們建議找到每個<p>標籤，然後在標籤內打破每個句子。但是，我正在製作Chrome擴展程序，並且這需要在幾乎任何網站上工作，因此一個字可能會出現在<p>標記之外，也可能出現在<h1>類型標記中，或者甚至在<div>之間。

任何洞察分支如何做？

Answer 1

它們似乎是將所有內容都包裝在<span>中，並且還添加了有關字符數的元數據。從他們的來源：

<p><span class="highlight js-highlight-this" data-end-char="23" 
data-highlight-count="0" data-start-char="0" id="highlight-86552-0">No 
doubt they can lose.</span> <span class="highlight js-highlight-this" 
data-end-char="132" data-highlight-count="0" data-start-char="24" id= 
"highlight-86552-24">As Adi says, I don't think they will, but OKC - in 
particular - still looms as a legit threat to the throne.</span> 
<span class="highlight js-highlight-this" data-end-char="336" 
data-highlight-count="0" data-start-char="133" id="highlight-86552-133">The 
Thunder are better on both ends this year than last, have the experience of 
having been there before, and you know Durant doesn't want to spend the 
rest of his career playing second fiddle to LeBron.</span> <span class= 
"highlight js-highlight-this" data-end-char="588" data-highlight-count="0" 
data-start-char="337" id="highlight-86552-337">The problem, and I think the 
reason so many assume the Heat will repeat, is that we haven't seen this 
version of the Thunder (with Kevin Martin rather than James Harden in the 
6th man role) in the playoffs before so the mystery factor comes into 
play.</span></p> 

然而，另一種更靈活的方法是簡單地使用正則表達式匹配來自任何元素的文本中提取的句子，無論是一個跨度，P，H1等

在這種情況下，您將通過正則表達式匹配找到句子，然後使用javascript動態地將每個元素與一個<span>元素進行包圍。然後，您可以將您的活動監聽器附加到那些動態創建的標籤上，以進行突出顯示以及您希望在懸停，點擊等時執行的任何其他操作。

Answer 2

您可以做類似這樣的事情，與您所做的事情不太一樣之後，我想？但可能會讓你開始進一步的想法。

<div>In cryptography, a keyed-hash message authentication code (HMAC) is a specific construction for calculating a message authentication code (MAC) involving a cryptographic hash function in combination with a secret cryptographic key. As with any MAC, it may be used to simultaneously verify both the data integrity and the authentication of a message. Any cryptographic hash function, such as MD5 or SHA-1, may be used in the calculation of an HMAC; the resulting MAC algorithm is termed HMAC-MD5 or HMAC-SHA1 accordingly. The cryptographic strength of the HMAC depends upon the cryptographic strength of the underlying hash function, the size of its hash output, and on the size and quality of the key.</div> 
<button id="get">Get Selected</button> 

function getText() { 
    var selectedText 

    if (typeof window.getSelection === "function") { 
     selectedText = window.getSelection(); 
    } else if (typeof document.getSelection === "function") { 
     selectedText = document.getSelection(); 
    } else if (document.selection && typeof document.selection.createRange() === "function") { 
     selectedText = document.selection.createRange().text; 
    } else { 
     selectedText = ""; 
     alert("No method to get selected text"); 
    } 

    if (!selectedText || selectedText === "") { 
     if (document.activeElement.selectionStart) { 
      selectedText = document.activeElement.value.substring(
      document.activeElement.selectionStart.document.activeElement.selectionEnd); 
     } 
    } 

    alert(selectedText); 
} 

document.getElementById("get").addEventListener("click", getText, false); 

上jsfiddle

你也可以看到進一步的答案在那裏我有這個想法 here on SO擴大。

筆者拉到其他的問題，但here is the other jsfiddle

window.getSelection

摘要

返回表示文本的由 用戶選擇的範圍內的選擇對象。

規格

DOM級別0.不是任何標準的組成部分。

預計在新的DOM範圍規範中指定

還有一個叫Rangy庫應該處理這種薄跨瀏覽器的，從來沒有嘗試過，但你可能要看一看。

一個跨瀏覽器的JavaScript範圍和選擇庫。它提供了一個簡單的基於標準的API，用於在所有主流瀏覽器中執行常見的DOM範圍和 選擇任務，從而在互聯網 Explorer最高版本（包括版本8）和DOM兼容瀏覽器之間抽象化地實現了該功能。