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("" + range.htmlText + "");
    }
    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("" + range.htmlText + "");

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 += "
  • "+$(currItem).text()+"
  • " } if($(currItem).hasClass("badText")){ badTextHtml += "
  • "+$(currItem).text()+"
  • " } } }) $("#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.

    Jowl pig chuck pork, tri-tip salami jerky andouille ham ground round rump beef ribs filet mignon hamburger. Brisket filet mignon pork belly fatback. Ham ball tip prosciutto tail. Sausage fatback filet mignon kielbasa andouille beef pancetta cow, sirloin ham hock bresaola pork loin shoulder strip steak boudin. Turducken capicola cow short loin venison ball tip. Flank pork loin boudin, short loin salami ribeye beef bacon ham hock ball tip rump pork belly. Beef ribs bresaola pork ground round hamburger pancetta short ribs, t-bone shank capicola ham sausage.
    Strip steak biltong ham hock, ham pig salami andouille prosciutto filet mignon cow. Chuck turkey jerky boudin, jowl cow drumstick ball tip short loin ham hock shankle venison sirloin tail t-bone. Spare ribs bacon venison, ribeye ham hock pork tail beef ribs capicola bresaola. Beef frankfurter salami, ham hock t-bone ball tip ground round shoulder short loin meatball filet mignon brisket chuck pastrami. Kielbasa filet mignon drumstick, ham ribeye chuck jerky beef ribs pork belly ball tip bresaola biltong.




    So there you have it. It’s nothing too advanced, but it’s a fun and powerful option that should give you more ideas for collecting data, allowing users to highlight and store specific pieces of content, or maybe even play around with some easter eggs and try to see who finds them! Again, here is the link to my demo and you can download the code.


    Please be sure to let me know of some examples anyone has developed using something like this. I’m definitely interested in seeing what could be done.

    Browsers tested: IE7+, Google Chrome, and FireFox.

    11 thoughts on “Highlight and Capture Text Using jQuery”

    1. Hi, it works fine in all browsers. Can I have a question?
      I want to use this to affect text before the user use CTRL+C to copy text and add to the selection some copyright text.

      How can I add hidden the text into the selection?
      I had an idea to add invisible element:
       Copyright (c)

      So it will be there for selection, but nobody could see it.
      After I leave the selection, it should automaticaly remove this element + your selection.

      I wanted to do it using jQuery AppendTo and unwrap the content after the mouseup, but it works only in FF and has an erros in IE and Chrome 🙁

      Any idea?

    2. Hi !

      Really, you have generated nice script to handle text highlighting. Also, I had good time on your written document for the same ..

      Thanks !!

      -vdl

    3. Hi ! I’d like to add that getSelected function should return sel.toString(). Otherwise, you risk to keep a reference to the window or document object. If the selection changes, even though it’s outside of the container, you’ll snap this new selection too.

    Leave a Reply

    Your email address will not be published. Required fields are marked *