JSFiddle - React, Tailwind, and code Playground
HTML
<div class="blah">
<h3><a>Text ab and la</a></h3>
</div>
JavaScript
function preg_quote( str ) {
// http://kevin.vanzonneveld.net
// + original by: booeyOH
// + improved by: Ates Goral (http://magnetiq.com)
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfixed by: Onno Marsman
// * example 1: preg_quote("$40");
// * returns 1: '\$40'
// * example 2: preg_quote("*RRRING* Hello?");
// * returns 2: '\*RRRING\* Hello\?'
// * example 3: preg_quote("\\.+*?[^]$(){}=!<>|:");
// * returns 3: '\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:'
return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
}
$('.blah h3 a').each(function(){
var text = $(this).text();
var searched_text = 'ab la';
var keywords = searched_text.split(' ');
keywords = $.map(keywords, function(str) {
return preg_quote(str);
});
$(this).html('<b>' + text.replace(new RegExp("(" + keywords.join('|') + ")" , 'gi'), "</b>$1<b>")) + '</b>';
});