JavaScript: UTF-8 Search Highlight Demo
This is a demonstration page for the UTF-8 enabled version of our JavaScript Search Keyword Highlighter as detailed here. Plus a few experimental add-ons.
Working Demonstration
Prés, barbouillons ça sirop, émotionneront délaces de tac odieux bu ris seiches, ma palpés seules truqua rusât, cicatrisée coexister vu, quadruplas, eau papauté. Décrépira bile âge, tirer, op seul délimiterons, dîné dm. Rebâti géra dg rôdé emmétrer rénove menhir osa pals zinc reniflera vante microcosme dl revolant tuerions, clés digitalisées celez gaspillai min colère briguer tubés, dédramatisiez épongerais kif gaules, agréât abrasassions tue dépaysez réant au mol ring rebouchant validée polype gag. Liants soufflant prébendes fin kits talé, maux benoît dérodât alésés, déparieraient. Divan, tramé hl mêla doive, elle bâcle gaza dépeignassions effectua toc use fin, nu tu recopies muerons gin es mg bai démodulait, déraillerai détournait boxers dépollues, merdes. Culé viagère hâté, ver épluchais le, agite mixe fumure insistez satisfecit.
Lockerte gleichförmig bislang, die, ob säge mähten erhaltenen am brio übler, fällen stürmte namenlose angerückter kraultet spukt obwohl traben fix hab genaues sehnte fehlen gewährten verheiltem ob pure paar fündig sass wacker leer geklaute umringend im genung sagen auf nennenswerterem las traut häute von rar prima ja nahe taut bin takelndes. Flirtet stur allen hort rang, mixt bin friedloses kleptomanisch foppte botanisch beratschlagtes, mietet. Dein salzige dösen bot ob, vernehmend am is ihr brandige nie, haste tupftest töntest gestraucheltem ab schlüpfest stet räudige, akutem ab niedrigeren riebst verfolge enormstem malo exakt auch kurvt ob mix jäh, hinausreicht übrige las er mißtet, kicken uns rufe, angehaltenem zweimal rupfe keimte stumm hab er befangene verkalkten falbe tut ahmt ätzten ersparendes.
Descongelabais repudies, eco, se asqueada clo mascarada beis e sol, oxida vigor y, o id y permutadas aire detestarais, bolear, mi qué i un bisen desdoraba. Fas, aficionado, e, lata uva es oxido, bruna, reparen ge discutiendo rechiflara xi acre zanjo tildar soy. Ohio colmenero auge aseo cavé figuraste letargo boj anuros burda pleiteador perjuré consorciadas revoca adivinarais califico nepa nu nea, bufé neo nea bésales. Mueran remecido ve mus eme presento feo lacas, palatinado pégale compendiado golpeados diré aciagos, va rifan sanearé. Hada, cede suyo opera sisean despertaban dudé confinamiento gaseen. Lo azotaba befa ha buscarse dance, recriminé pez gozar apago ase, o caberse, cale di. De i orees cualquiera mise kan jactad, galileanas, tun.
Random words generated using adhesiontext™
The three paragraphs of text are just a jumble of words in: French, German and Spanish, selected for the mix of accented characters. Because our code is accent-agnostic searches might find matches in any or all languages.
Source Code
What we have a simple HTML form with a number of hidden elements that are made visible after a search has been conducted.
<form>
<p>Highlight keywords as you type: <input id="keywords" size="24" placeholder="start typing" autofocus>
<small>
<span id="counter"><!-- --></span>
<span id="navigate" style="display: none;">
<button id="cancel">×</button>
<button id="prev">«</button>
<button id="next">»</button>
</span>
</small></p>
</form>
<div id="playground">
<p>Prés, barbouillons ça sirop, émotionneront délaces de tac odieux bu ris seiches, ma palpés seules truqua rusât, cicatrisée coexister vu, quadruplas, eau papauté. Décrépira bile âge, tirer, op seul délimiterons, dîné dm. Rebâti géra dg rôdé emmétrer rénove menhir osa pals zinc reniflera vante microcosme dl revolant tuerions, clés digitalisées celez gaspillai min colère briguer tubés, dédramatisiez épongerais kif gaules, agréât abrasassions tue dépaysez réant au mol ring rebouchant validée polype gag. Liants soufflant prébendes fin kits talé, maux benoît dérodât alésés, déparieraient. Divan, tramé hl mêla doive, elle bâcle gaza dépeignassions effectua toc use fin, nu tu recopies muerons gin es mg bai démodulait, déraillerai détournait boxers dépollues, merdes. Culé viagère hâté, ver épluchais le, agite mixe fumure insistez satisfecit.</p>
<p>Lockerte gleichförmig bislang, die, ob säge mähten erhaltenen am brio übler, fällen stürmte namenlose angerückter kraultet spukt obwohl traben fix hab genaues sehnte fehlen gewährten verheiltem ob pure paar fündig sass wacker leer geklaute umringend im genung sagen auf nennenswerterem las traut häute von rar prima ja nahe taut bin takelndes. Flirtet stur allen hort rang, mixt bin friedloses kleptomanisch foppte botanisch beratschlagtes, mietet. Dein salzige dösen bot ob, vernehmend am is ihr brandige nie, haste tupftest töntest gestraucheltem ab schlüpfest stet räudige, akutem ab niedrigeren riebst verfolge enormstem malo exakt auch kurvt ob mix jäh, hinausreicht übrige las er mißtet, kicken uns rufe, angehaltenem zweimal rupfe keimte stumm hab er befangene verkalkten falbe tut ahmt ätzten ersparendes.</p>
<p>Descongelabais repudies, eco, se asqueada clo mascarada beis e sol, oxida vigor y, o id y permutadas aire detestarais, bolear, mi qué i un bisen desdoraba. Fas, aficionado, e, lata uva es oxido, bruna, reparen ge discutiendo rechiflara xi acre zanjo tildar soy. Ohio colmenero auge aseo cavé figuraste letargo boj anuros burda pleiteador perjuré consorciadas revoca adivinarais califico nepa nu nea, bufé neo nea bésales. Mueran remecido ve mus eme presento feo lacas, palatinado pégale compendiado golpeados diré aciagos, va rifan sanearé. Hada, cede suyo opera sisean despertaban dudé confinamiento gaseen. Lo azotaba befa ha buscarse dance, recriminé pez gozar apago ase, o caberse, cale di. De i orees cualquiera mise kan jactad, galileanas, tun.</p>
</div>
<div id="regex">Regex: -</div>
We use the Hilitor2 class as before, but after the search has run it's course we create an array of all the MARK elements indicating where a word has been highlighted.
<script src="hilitor-utf8.js"></script>
<script>
window.addEventListener("DOMContentLoaded", function(e) {
var myHilitor = new Hilitor2("playground");
myHilitor.setMatchType("left");
var matchIndex = -1;
var matches = 0;
var container = document.getElementById("playground");
var searchEl = document.getElementById("keywords");
var counterEl = document.getElementById("counter");
var navEl = document.getElementById("navigate");
var navPre = document.getElementById("prev");
var navNext = document.getElementById("next");
var navCancel = document.getElementById("cancel");
var regexEl = document.getElementById("regex")
var searchTrigger = function(e) {
matches = myHilitor.apply(searchEl.value);
regexEl.innerHTML = "Regex: " + myHilitor.getRegex();
displayNavigation();
};
searchEl.addEventListener("keyup", searchTrigger, false);
navPre.addEventListener("click", function(e) {
doNav(-1);
e.preventDefault();
}, false);
navNext.addEventListener("click", function(e) {
doNav(1);
e.preventDefault();
}, false);
navCancel.addEventListener("click", function(e) {
searchEl.value = "";
searchTrigger();
regexEl.innerHTML = counterEl.innerHTML = "";
container.scrollTop = 0;
e.preventDefault();
}, false);
var displayNavigation = function()
{
matchIndex = -1;
counterEl.innerHTML = matches + ((matches == 1) ? " match" : " matches");
if(matches > 0) {
navEl.style.display = "inline";
navPre.disabled = true;
navNext.disabled = false;
} else {
navEl.style.display = "none";
}
};
var doNav = function(offset)
{
matchIndex += offset;
matchIndex = matchIndex % matches;
myHilitor.gotoMatch(matchIndex);
navPre.disabled = (matchIndex <= 0);
navNext.disabled = (matchIndex >= matches - 1);
};
}, false);
</script>
In the feedback section of the related articles below you will find more tips and examples.
Related Articles - Search Highlighting
- JavaScript Search Keyword Highlighting
- JavaScript Highlighting Words With UTF-8 Support
- JavaScript UTF-8 Search Highlight Demo
Leo 12 August, 2021
On mobiles, you type, and before you click the prev and next buttons for the first time, you have to hide the keyboard