Highlight and Capture Text Using jQuery

At a previous job I was trying to help a fellow developer out with what they were trying to accomplish and in doing so, I came up with what you’re going to see below. Just as a note, they never ended up needing this at all ^_^!

So what’s this post about? Well, I’m going to try and show you another option for collecting and saving content. I’ve heard some magazine and newspaper websites are doing things like this, but I haven’t seen it anywhere except for analytics tracking. As a note, this is not at all a polished nor finished demo, but I’d like to see what kind of examples other developers can or maybe have already done with this. I hope you’ll find my code as a good starting place for getting started with your own tests.

 

So the first thing we need to do is setup the highlighting functionality so we can figure out which piece of content we’re actually on. As a note, I took this from someone else’s post a while back and have just slightly modified.

// Make sure the object is created if it's already not

if(!window.CurrentSelection){

CurrentSelection = {}

}

//define the selector object

CurrentSelection.Selector = {}

//get the current selection

CurrentSelection.Selector.getSelected = function(){

var sel = '';

if(window.getSelection){

sel = window.getSelection()

}

else if(document.getSelection){

sel = document.getSelection()

}

else if(document.selection){

sel = document.selection.createRange()

}

return sel

}

//function to be called on mouseup

CurrentSelection.Selector.mouseup = function(){

var st = CurrentSelection.Selector.getSelected()

if(document.selection && !window.getSelection){

var range = st

range.pasteHTML("<span class='selectedText'>" + range.htmlText + "</span>");

}

else{

var range = st.getRangeAt(0)

var newNode = document.createElement("span");

newNode.setAttribute("class", "selectedText");

range.surroundContents(newNode)

}

}

$(function(){

$(document.body).bind("mouseup",CurrentSelection.Selector.mouseup)

})

Let’s take a look at this piece of code here:

range.pasteHTML("<span class='selectedText'>" + range.htmlText + "</span>");

What this is doing is inserting a span with the class of selectedText around the currently highlighted piece of text. You can then place an event handler on that span tag, such as what I’ve done below.

//event handler for clicking the selected highlighted text

$("span.selectedText").live("click",function(){

if($(this).hasClass("goodText")){

$(this).addClass("badText").removeClass("goodText")

}

else if($(this).hasClass("badText")){

$(this).addClass("goodText").removeClass("badText")

}

if(!$(this).hasClass("badText") && !$(this).hasClass("goodText")){

$(this).addClass("goodText")

}

})

//extracting all of the selected highlighted text

$("#extractText").live("click",function(){

var badTextHtml = '',

goodTextHtml = ''

$.each($(".selectedText"),function(i,currItem){

if($(currItem).text() != ''){

if($(currItem).hasClass("goodText")){

goodTextHtml += "<li>"+$(currItem).text()+"</li>"

}

if($(currItem).hasClass("badText")){

badTextHtml += "<li>"+$(currItem).text()+"</li>"

}

}

})

$("#badText").html(badTextHtml)

$("#goodText").html(goodTextHtml)

$("#resultsCont").fadeIn()

})

//clear the results and set the content back to text and not html

$("#clearHighlights").live("click",function(){

var hLCont = $("#highlightContainer p")

hLCont.text(hLCont.text())

$("#resultsCont").hide()

})

Now that we’ve got some event handlers for the selections, we can then decide what we want to do with the content. In this case, I’m just outputting in different types, Bad Text and Good Text.

For the sake of humanity, I’m going to skip the HTML lecture and throw it into the final code with the JavaScript.

<div id="highlightContainer">

<p id="textWithinHighlightContainer" style="line-height:1.9em; font-size:16px; margin:10px; border:1px #333 solid; padding:5px; width: 450px">

Page 1 of 3 | Next page