Return clause what appears click

Question

Follow the previous question: Use Javascript to get a cliched word sentence

I have been dealing with this issue for many years. However, I woke up this morning and started reading: http://branch.com/b/nba-playoffs-round-1

Voila! Branch allows users to select an offer and then share it, save it, etc. This is exactly what I want to do. They seem to complete each sentence in <span> tags.

Previously, people suggested finding every <p> , and then breaking every sentence in the tag. However, I am doing the chrome extension, and this should work on almost any website, so the word may appear outside the <p> , possibly in a tag like <h1> or even in a <div> .

Any insight into how Branch did this?

Answer 1

They seem to wrap everything in <span> s, and also add metadata about the number of characters. 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 to simply use a regular expression to extract sentences from the text of any element, be it span, p, h1, etc.

In this case, you will find sentences with a regular expression, and then alternately surround each <span> element dynamically with javascript. Then you can attach event listeners to those dynamically created tags to make a selection, and all that you would like to do when you hover, click, etc.

Answer 2

You can do something like this, not the same as you, I think? But it can give you a start for 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 the following answer in which I expanded this idea here on SO .

author pulled out another question but here is another jsfiddle

window.getSelection

Summary

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

Specification

The DOM level is 0. Not part of any standard.

It is expected to be listed in the new DOM range specification.

There is also a library called Rangy that should handle such a thin cross browser, never tried, but you might want to take a look.

Cross-browser JavaScript range and selection library. It provides a simple standards-based API for executing common DOM and Choice ranges in all major browsers, distracting from the wild various implementations of this function between Internet Explorer up to version 8 and DOM-compatible browsers.