Highlight text using jQuery and the HTML5 mark tag

Posted on by

Here’s a jQuery plugin I wrote that’ll add HTML5 <mark> tags around keywords or phrases in an element’s body text.

What is mark?

a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context

http://www.whatwg.org/specs/web-apps/

Usage

Add the script to your page, and then when the DOM is ready, do something like:

    $('body').mark('Lorem ipsum');

The plugin can actually be used to wrap any tag around keywords. Simply pass the tag name you want to use as an option:

    $('body').mark({
      text: 'Lorem ipsum',
      tag:  'span',
      cssClass:  'mark'
    });

The above example will wrap span elements around the words lorem and ipsum. Each span element will have the class ‘mark’. View an example implementation.

TODO

  1. Input sanitation on the text to be marked. Currently the text is dumped straight into a regular expression. It needs to be escaped so that any regular expression meta-characters are interpreted as literals.
  2. Similarly, HTML special characters in the input need to be expanded into their HTML entities.
  3. From what I can see, IE doesn’t like <mark> tags, and seems to automatically self close the opening and closing tags inserted into the DOM. WTF? Can anyone shed any light on this problem? For now, you’re going to have to use a <span> with a CSS class

If you’re interested in contributing, get in touch

79 thoughts on “Highlight text using jQuery and the HTML5 mark tag”

  1. Thank you so much for providing individuals with an exceptionally terrific possiblity to read articles and blog posts from this website. It is often very excellent and also stuffed with amusement for me personally and my office colleagues to search your site minimum thrice in a week to read through the fresh stuff you have. And definitely, we’re usually satisfied with the terrific suggestions you give. Some 1 ideas in this post are in truth the finest I’ve had.

  2. A lot of thanks for your own labor on this blog. My daughter loves managing investigations and it’s really simple to grasp why. My partner and i learn all regarding the lively medium you offer valuable thoughts via this web site and even welcome contribution from some others on that concern and my girl is in fact discovering a lot of things. Take pleasure in the remaining portion of the year. Your doing a remarkable job.

  6. Thank you so much for providing individuals with such a brilliant chance to check tips from here. It really is very sweet plus stuffed with a great time for me and my office peers to visit your website at the least 3 times in a week to see the fresh guides you have. And of course, I’m so actually satisfied with your tremendous creative ideas served by you. Selected 1 tips in this posting are clearly the most effective we have ever had.

  9. I do believe all of the ideas you’ve offered on your post. They’re really convincing and will definitely work. Still, the posts are too brief for novices. May you please extend them a little from next time? Thank you for the post.

  10. I believe this internet site has got some real superb info for everyone :D . “The test of every religious, political, or educational system is the man that it forms.” by Henri Frdric Amiel.

  11. I truly enjoy examining on this web site , it has got wonderful articles . “The secret of eternal youth is arrested development.” by Alice Roosevelt Longworth.

  14. excellent issues altogether, you just gained a emblem new reader. What might you suggest about your submit that you made a few days ago? Any positive?

  17. Great info and straight to the point. I am not sure if this is in fact the best place to ask but do you people have any thoughts on where to employ some professional writers? Thx :)

  18. I must say it was hard to find your site in search results.
    You write great content but you should rank your website higher in search engines.
    If you don’t know how to do it search on youtube: how to rank a
    website Marcel’s way

  28. She helps women who are struggling with symptoms of perimenopause and menopause find natural hormone balancing solutions so they can rock their mojo through midlife and beyond dapoxetine priligy uk

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>