Cíle

1. Označit (resp. zvýraznit) text v prohlížeči (Chrome, Firefox, IE, Edge) a to i v mobilních verzích aplikace (Android, iOS, Windows Phone)
2. Uložit serializovanou podobu označení do úložiště pro pozdější obnovení označení (například při návratu na stránku)
3. Při novém načtení stránky (render stránky), označit text

Poprvé

Musím se přiznat, že k prvnímu pokusu o označení jsem pouze přišel s tím, že už to je implementované správně a funguje. Nefungovalo. V daném HTML byli vytvořené jakési „stropy“ (offsety), reprezentované prostým span HTML elementem s číselnou hodnotu v datasetu.

Tento kód zde raději ani nesdílím, neb bych nerad, aby se čtenáři udělalo nevolno.

Nebylo možné označování přes více různých elementů – původně počítalo s označením pouze v odstavcích, ale tabulky, divy nebo obrázky to ignorovalo.

Takhle to nepůjde.

Podruhé

Většinou nejprve hledám po internetu, jestli už někdo neřešil podobný problém. Měl jsem štěstí – řešil. Narazil jsem na knihovnu rangy.js. Má svou wiki, kde je krásně popsáno API, takže jsem se mohl podívat, co tato knihovna umí.

rangy.js má v sobě modul pro zvýraznění (Highlighter module), který má dvě implementace:

• textContent
  • výhody: jednoduchý, rychlý algoritmus
  • nevýhody: změny DOMu mají za následek, označení něčeho jiného než bylo před změnou DOMu označeno, i jakýkoli bilý znak (white-space) měl za následek mutaci označení
• TextRange
  • výhody: odolný proti zápisu více bílých znaků (white-space)
  • nevýhody: extrémně pomalý

Implmentace „textContent“ nemohla být použita, protože mobilní aplikace renderovala HTML trochu jinak a to i přesto, že bylo použito Chromium (jádro Chrome tzn. stejný render engine).

Zkusil jsem implementaci „TextRange“. Nepoužitelné. Mobilní aplikaci trvalo až 10s než vyrenderuje označené HTML.

I když bylo označení vždy přesné, tak z výkonových důvodu jsem od něj upustil.

Potřetí

Tento postup, už jsem vymýšlel já. Spoočíval v serializaci Range objektu velmi jednoduchou metodou. Range objekt má v sobě startContainer, startOffset, endContainer a endOffset. Serializace probíhá tak, že se vygeneruje validní selektor elementu startContainer a endContainer relativně ke zvolenému HTML elementu (například k body) a spočítá se startOffset a endOffset v daných start/end kontejnerech.

// Takto vypadá definice selektoru, který lze uložit do databáze jako JSON
interface IHtmlElementSelectorResult {
   selector: string;
   childNodeIndex: number;
   offset: number;
}
// Takto vypadá příklad serializované reprezentace Range objektu
{
   start: {
       selector: "div > div > p:nth-of-type(4)",
       childNodeIndex: 0,
       offset: 10
   },
   end: {
       selector: "div > div > p:nth-of-type(8) > strong",
       childNodeIndex: 0,
       offset: 5
   }
}

Z takto serializované hodnoty, lze velmi snad zrekonstruovat Range objekt a nad ním poté provést označení.

Dokud nezmutuje DOM. Pokud zmutuje, tak není možná rekonstrukce. A právě tím, že chceme označit text, tak DOM mutuje (vkládáme <span> HTML elementy, které zvýrazňují text).

Takže znova a jinak.

Počtvrté

Opět jsem se vyskytl na zelené louce.

S kolegou jsme se nad tímto problémem zamysleli z jiného pohledu. Označení nebude prováděno na základě znalosti (reprezentace) DOMu, ale na základě znalosti počtu výskytu jednotlivých slov, které jsme vybrali, že chceme označit a které se „lámali“ skrze DOM.

Pustil jsem se do implementace. Procházením DOMU a sbíráním počtu výskytu označených slov, jsem došel k cíli. Fungovalo to jak na desktopu, tak i na mobilních aplikacích, je to relativně svižné – PC maximálně malé stovky milisekund, i při označení obrovského kusu textu (DOMu), na mobilních aplikacích podobně.

Využil jsem k procházení DOMu objekt TreeWalker, který jsem si nastavil tak, aby procházel jen ten označený kus textu a spočítal si výskyty slov. Výpočet jsem si uložil do JSON, který ač je závislý na velikosti textu a počtu výskytu slov, tak funguje skvěle.

TL;DR

Pro označení, uložení pozice a opětovné označení textu v HTML (DOM) nejsou vhodné způsoby:

• Vlastní implementace způsoby jako „počet znaků od začátku body elementu“, „počet znaků označeného textu“
• Použití knihovny rangy.js (nad kterou se v době psaní tohoto článku stejně už 2 roky nic neděje)
• Vlastní implementace způsobem serializace a deserializace Range objektu

Zatím jediný a funkční způsob byl vlastní implementace založená na znalosti označeného textu a počet výskytů jednotlivých slov, případně úseků slov – záleží na tom jak moc je DOM komplikovaný/velký/strukturovaný.