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

2,993 thoughts on “Highlight text using jQuery and the HTML5 mark tag”

  9. Spannende Spiele Columbus Deluxe Symbole erklart bieten Spielern die Moglichkeit in die Welt des Glucksspiels einzutauchen. Von klassischen Spielautomaten bis hin zu modernen Tischspielen gibt es fur jeden Geschmack etwas. Die Sicherheit und das Spielerlebnis stehen dabei immer im Vordergrund sodass sich Spieler entspannt zurucklehnen konnen wahrend sie ihr Gluck versuchen.

  12. Русские подарки и сувениры купить в широком ассортименте. Классические и современные изделия национальные символы качественные материалы и оригинальные идеи для памятных и душевных подарков.

  19. Нужно казино? ап х современные игры простой вход понятный интерфейс и стабильная работа платформы. Играйте с компьютера и мобильных устройств в любое время без лишних сложностей.

  21. Самые качественные https://bliny-olimpiiskie.ru широкий выбор весов и форматов. Надёжные материалы удобная посадка на гриф долговечное покрытие. Подходят для фитнеса пауэрлифтинга и регулярных тренировок.

  33. I enjoy what you guys are usually up too. This kind of clever work and exposure!
    Keep up the wonderful works guys I’ve incorporated you guys to
    my blogroll.

    Feel free to surf to my web site: homepage

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>