Enhance Usability by Highlighting Search Terms

by Matt Riggott, Brian Suda

27 Reader Comments

Back to the Article

  1. Martin Kliehm

    Nice script, but when your search term includes a German “Umlaut” like “ü” (ü), all text vanishes!

    Also I got strange results when the searched text includes several <div>s, <!—comments—>, and <?php ?> tags, don’t know which is responsible. Then the first <div> block is ignored and only text in the second is highlighted…

    Embed
    Copy & paste the code below to embed this comment.

  2. Matijs van Zuijlen

    Highlighting is nice if the words you were looking for are in an obscure part of the page. However, it quickly becomes annoying when the searched words are very common in the main text. Precisely because those words stand out, it gets very hard to read the rest.

    Embed
    Copy & paste the code below to embed this comment.

  3. porneL

    I’d recommend using XML/DOM parser instead of risky and costly regular expressions. And here you go – another advantage of using valid XHTML.

    Embed
    Copy & paste the code below to embed this comment.

  4. diseño web

    congratulations for the article.

    Embed
    Copy & paste the code below to embed this comment.

  5. watches

    <h1>You are invited to check the sites about adult dvd |  adult dvd | http://www.adult-dvd-top-shop.info/ | <br> card credit |  card credit | http://www.card-credit-4u.info/ | <br> apply card credit |  apply card credit | http://www.apply-card-credit-4u.info/ | <br> cheap flight |  cheap flight | http://www.cheap-flight-e-site.info/ | <br> emc mortgage |  emc mortgage | http://www.emc-mortgage-advisor.info/ | <br> dating |  dating | http://www.dating-e-site.info/ | <br> card credit unsecured |  card credit unsecured | http://www.card-credit-unsecured-4u.info/ | <br> personal loans bad credit |  personal loans bad credit | http://www.personal-loans-bad-credit-ebanking.info/ | <br> credit report |  credit report | http://www.credit-report-4u.info/ | <br> equipment used for golf |  equipment used for golf | http://www.equipment-used-for-golf-e-course.info/ | <br> debt management solution |  debt management solution | http://www.debt-management-solution-advisor.info/ | <br> capital card credit one |  capital card credit one | http://www.top-card-credit-one-4u.info/ | <br>… </h1>

    Embed
    Copy & paste the code below to embed this comment.

  6. Jeff

    Rather than defining colors to use for highlighting, you can use css colors to automatically specify whichever colors the browser uses by default for highlighting. Look here: http://bombingpixels.com/css/testing/css-user-interface.htm

    Embed
    Copy & paste the code below to embed this comment.

  7. Dante

    “Gracias” in inglés es “Thanks” no “Congratulations”.

    Embed
    Copy & paste the code below to embed this comment.