0

Follow up to a previous question: Use Javascript to get the Sentence of a Clicked Word

I have been fumbling around with this question for some time now. However, I woke up this morning and started reading this: http://branch.com/b/nba-playoffs-round-1

Voila! Branch allow for users to select a sentence and then share it, save it, etc...That's exactly what I want to do. It looks like they're wrapping each sentence in <span> tags.

Previously, people have suggested to find each <p> tag and then break each sentence up within the tag. However, I am making a chrome extension and this needs to work on virtually any website, so a word could appear outside a <p> tag, maybe in an <h1> type tag or even in a <div>.

Any insight into how Branch did it?

Community
  • 1
  • 1
freedomflyer
  • 2,431
  • 3
  • 26
  • 38

2 Answers2

0

They appear to be wrapping everything in <span>s, and also adding meta-data about the character counts. From their source:

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

However, another more flexible approach would be simply to use regular expression matching to extract sentences from the text of any element, whether it be a span, p, h1, etc.

In this scenario, you would find the sentences via regular expression matching, and then surround each one with a <span> element dynamically using javascript. Then you could attach your event listeners to those dynamically created tags to do the highlighting and whatever else you desired to do on hover, on click, etc.

Jonah
  • 15,806
  • 22
  • 87
  • 161
0

You can do something like this, not quite the same as what you are after, I think? But may give you a start to further ideas.

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

on jsfiddle

you can also see a further answer where I have expanded on this idea here on SO.

the author pulled the other question but here is the other jsfiddle

window.getSelection

Summary

Returns a selection object representing the range of text selected by the user.

Specification

DOM Level 0. Not part of any standard.

It is expected to be specified in a new DOM Range spec

There is also a library called Rangy that is supposed to handle this kind of thin cross-browser, never tried it but you may want to take a look.

A cross-browser JavaScript range and selection library. It provides a simple standards-based API for performing common DOM Range and Selection tasks in all major browsers, abstracting away the wildly different implementations of this functionality between Internet Explorer up to and including version 8 and DOM-compliant browsers.

Community
  • 1
  • 1
Xotic750
  • 22,914
  • 8
  • 57
  • 79