Ja der er jo nok 100 andre måder at gøre det på – fremhæv noget tekst på en html-side. F.eks. et søgeresultat eller lignende. Det er nemt nok at lave replace på strengen, og indsætte noget ‘high-light’ Html, men, for der er jo altid et: men, hvis Html’en indeholder noget der matcher:

Jesper forsøger at understrege en pointe i <a title="Jesper" href="#test">sin</a> html

Det vil give et uheldigt output hvis man forsøger med simpel replace:

var string = body.replace(/jesper/, “<span>$1</span>”);

Det vil finde jesper i både tekst og Html, og resultatatet vil være en side der ikke fungerer efter hensigten.

Man skal altså bruge et lidt mere komplekst regulært udtryk. Udtrykket skal med andre ord matche følgende:

Finde ordet: jesper, hvis det ikke bliver fulgt af tegnet ‘>’.

Vi skal altså bruge RegExp lookaround funktionalitet. Mere specifikt en negativ lookahead. Den har den egenskab at den laver et match, men som ikke fanger matchen. Syntaksen for negativ lookahead i JavaScript er: (?!pattern) – finder tekst der ikke matcher pattern, og når matchen findes, søges der foran ‘ikke-matchen’.

Følgende udtryk fremkommer:

var re = /(jesper)(?!([^<]+)?>)/gi

Den vil finde ‘jesper’, hvis ikke den er fulgt af en sekvens af ‘ikke <’ og ‘>’.

Ja – det er kryptisk, og enormt svært at forklare…

Som så ofte før, pakker vi funktionaliteten ind i en jQuery-plugin:

(function($) {
    $.fn.highlight = function(phrase) {
        var re = new RegExp("(" + phrase + ")(?!([^<]+)?>)", "gi");
        return this.each(function(idx, itm) {
            var newHtml = $(itm).html().replace(re, "<span style="background-color: yellow">$1</span>");
            $(itm).html(newHtml);
        });
    };
})(jQuery);

Nu er det let som ingen ting at understrege en pointe:

$("#myDiv").highlight("min pointe");