Highlight using jQuery

by M Shameer

HTML

<div id="test">this is Māori that needs highlighting my text</div>

CSS

span{
  background-color:#f00;
}

JavaScript

var src_str = $("#test").html();
var term = "Māori";
term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("("+term+")", "gi");

src_str = src_str.replace(pattern, "<span>$1</span>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");

$("#test").html(src_str);