0

跟进上一个问题：Use Javascript to get the Sentence of a Clicked Word

一段时间以来，我一直在摸索这个问题。然而，我今天早上醒来并开始阅读：http ://branch.com/b/nba-playoffs-round-1

瞧！分支允许用户选择一个句子，然后分享、保存等等……这正是我想要做的。看起来他们正在将每个句子包装在<span>标签中。

以前，人们建议找到每个<p>标签，然后在标签内分解每个句子。但是，我正在制作一个 chrome 扩展，这几乎需要在任何网站上运行，所以一个词可能出现在<p>标签之外，可能在<h1>类型标签中，甚至在<div>.

对 Branch 是如何做到的有任何见解吗？

4

2 回答 2

0

你可以做这样的事情，与你所追求的不太一样，我想？但可能会给你一个开始进一步的想法。

<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上

您还可以看到我在 SO 上扩展了这个想法的进一步答案。

作者提出了另一个问题，但这是另一个 jsfiddle

window.getSelection

概括

返回一个选择对象，表示用户选择的文本范围。

规格

DOM 级别 0。不属于任何标准。

预计将在新的 DOM Range 规范中指定

还有一个名为Rangy的库应该可以处理这种瘦跨浏览器，从未尝试过，但您可能想看看。

一个跨浏览器的 JavaScript 范围和选择库。它提供了一个简单的基于标准的 API，用于在所有主要浏览器中执行常见的 DOM 范围和选择任务，抽象出 Internet Explorer （包括版本 8）和兼容 DOM 的浏览器之间该功能的完全不同的实现。

于 2013-04-22T15:49:05.487 回答
0

他们似乎将所有内容都包装在<span>s 中，并且还添加了有关字符数的元数据。从他们的来源：

<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>

然而，另一种更灵活的方法是简单地使用正则表达式匹配从任何元素的文本中提取句子，无论是 span、p、h1 等。

在这种情况下，您将通过正则表达式匹配找到句子，然后<span>使用 javascript 动态地将每个句子包围起来。然后，您可以将事件侦听器附加到那些动态创建的标签上，以进行突出显示以及您希望在悬停、单击等时执行的任何其他操作。

于 2013-04-22T15:33:40.360 回答