JavaScript načtení textu z cizí webové stránky

JavaScript umožňuje načíst text a další údaje z právě otevřené webové stránky, vyhledat konkrétní elementy v jejím DOM a získaná data dále zpracovat nebo předat jiné úloze. V prohlížeči Safari lze tento postup použít například prostřednictvím akce „Spustit JavaScript na webové stránce“ v aplikaci Zkratky.

Akce „Spustit JavaScript na webové stránce“ vám umožňuje načíst data z webové stránky pomocí skriptu, který extrahuje všechny prvky splňující určitá kritéria a potom tyto prvky postupně projde a s každým provede určitou úlohu (nebo jednotlivé prvky dále analyzuje). Takto lze načíst například text článků, seznam obrázků, prvky určité třídy nebo údaje potřebné pro další zpracování.

DOM jako základ načítání obsahu stránky

DOM je zkratka pro Document Object Model. Jedná se o strom elementů (objektů), ze kterých je HTML stránka složena. Objekty v DOM můžeme pomocí JavaScriptu měnit a tím samozřejmě měníme výslednou podobu webové stránky.

JavaScript tento dokument vidí jako strom objektů. Po stromu se můžeme pohybovat a do jeho větví přidávat nové elementy, měnit jejich obsah nebo je mazat.

Kdykoli chceme pracovat v JavaScriptu s DOM, odkazujeme se na objekt document, který má pro to určené metody. Pomocí těchto metod lze elementy vyhledávat, číst jejich textový obsah, získávat atributy a dále s nimi pracovat.

Načtení textu pomocí vyhledání elementu

V naší kalkulačce budeme zatím z DOM vybírat prvky pouze podle jejich id. Nejprve si elementy na stránce vybereme podle jejich id pomocí metody getElementById(). Ta bere jako parametr textový řetězec s názvem id vybíraného elementu.

Každý element má nějaké vlastnosti. Element <input> má například vlastnost value, v níž je uložena hodnota, kterou do daného pole uživatel zadal. Vlastnost value použijeme ke čtení hodnoty z formulářového pole, zatímco innerText slouží k nastavení textu uvnitř vybraného elementu.

Pro načtení textu z elementu můžeme použít například jeho vlastnost innerText:

const text = document.getElementById("element").innerText;

V proměnné text potom máme textový obsah vybraného elementu. Pokud chceme pracovat s obsahem včetně HTML značek, lze místo innerText použít vlastnost innerHTML.

Vyhledání více elementů pomocí querySelectorAll()

Akce „Spustit JavaScript na webové stránce“ umožňuje načíst data z webové stránky pomocí skriptu, který extrahuje všechny prvky splňující určitá kritéria a potom tyto prvky postupně projde a s každým provede určitou úlohu (nebo jednotlivé prvky dále analyzuje).

Pro vyhledání všech obrázkových prvků na stránce použijte následující příkaz:

var prvky = document.querySelectorAll("img");

Jiným příkladem může být načtení všech prvků třídy „post“:

var prvky = document.querySelectorAll(".post");

Metoda querySelectorAll() vrací seznam NodeList. Selektor v uvozovkách odpovídá CSS selektoru, takže lze vyhledávat podle názvu elementu, třídy, identifikátoru nebo jejich kombinace.

Po vytvoření seznamu NodeList můžete postupně procházet jednotlivé prvky (a dále je filtrovat nebo přidávat do datové struktury) pomocí cyklu:

var elements = . ;for (let element of elements) { // . }

Pro načtení textu z více nalezených elementů je možné každý prvek projít v cyklu a přečíst jeho textový obsah:

var prvky = document.querySelectorAll(".post");

for (let prvek of prvky) {

const text = prvek.innerText;

}

Takový postup je vhodný například pro načtení nadpisů, odstavců, položek seznamu nebo textů článků, pokud mají na stránce společný element, třídu nebo jiný rozpoznatelný znak.

Načtení textu z konkrétního elementu

Pokud znáte id elementu, můžete jej načíst přímo pomocí metody getElementById(). Naše kalkulačka bude pracovat s vytvořeným tlačítkem, dvěma vstupy pro čísla, a řádkovým (in-line) elementem pro výsledek. Proto si všechny tyto elementy načteme do proměnných:

const tlacitkoElement = document.getElementById("tlacitko");
const cislo1Element = document.getElementById("cislo1");
const cislo2Element = document.getElementById("cislo2");
const vysledekElement = document.getElementById("vysledek");

U elementu input se hodnota získává vlastností value:

const hodnota = document.getElementById("cislo1").value;

U běžného textového elementu, například p, span nebo article, lze obsah načíst pomocí innerText:

const text = document.getElementById("vysledek").innerText;

JavaScript tento dokument vidí jako strom objektů. Na obrázku chybí nějaké uzly (celý element <head>), chybí tam i tzv. textové uzly, což je samotný text elementu.

Rozdíl mezi innerText a innerHTML

Vlastnost innerText slouží k práci s textovým obsahem vybraného elementu. Vlastnost innerHTML pracuje s obsahem elementu jako s HTML kódem.

Jestliže stránka obsahuje například odstavec s formátovanou částí textu, innerText načte textový obsah, zatímco innerHTML zachová také HTML značky použité uvnitř elementu.

Při načítání textu z cizí webové stránky je obvykle vhodnější innerText, protože vrací čitelný text a nevyžaduje další zpracování HTML značek. innerHTML lze použít v případě, kdy je nutné zachovat strukturu nebo formátování obsahu.

Načtení textu podle třídy

Pokud element nemá vhodné id, lze jej vyhledat podle třídy pomocí selektoru začínajícího tečkou:

var prvky = document.querySelectorAll(".post");

Výsledný seznam může obsahovat jeden nebo více elementů. Jednotlivé prvky lze procházet pomocí cyklu:

for (let element of prvky) {

const text = element.innerText;

}

Stejným způsobem lze vyhledat všechny elementy určitého typu, například všechny odstavce:

var prvky = document.querySelectorAll("p");

Pro načtení všech nadpisů určité úrovně lze použít například selektor h2:

var prvky = document.querySelectorAll("h2");

Výběr lze také kombinovat. Selektor article p například vyhledá odstavce uvnitř elementu article.

Načtení textu z cizí webové stránky v Safari

Při prohlížení webových stránek obecně nemáte k JavaScriptu přímý přístup. Pokud však vytvoříte zkratku, která obsahuje akci „Spustit JavaScript na webové stránce“, a potom tuto zkratku spustíte v aplikaci Safari, můžete JavaScript na webové stránce ovládat.

Vstupem akce „Spustit JavaScript na webové stránce“ musí být aktivní webová stránka v Safari, což znamená, že zkratku musíte spustit z listu sdílení (v Safari konkrétně SFSafariViewController nebo ASWebAuthenticationSession).

Při spuštění zkratky z listu sdílení je vstup z aplikace Safari předán první akci ve zkratce. Vstupem akce „Spustit JavaScript na webové stránce“ sice musí být webová stránka v Safari, pomocí automatických proměnných do ní však můžete vložit další data.

Před spuštěním JavaScriptu pomocí zkratky musíte toto nastavení povolit. Viz Pokročilé nastavení soukromí a zabezpečení ve Zkratkách na Macu.

Praktický postup načtení textu

1. Otevřete požadovanou webovou stránku v Safari.
2. Spusťte zkratku z listu sdílení.
3. V akci „Spustit JavaScript na webové stránce“ vyhledejte požadované elementy pomocí selektoru.
4. Projděte nalezené elementy pomocí cyklu.
5. Načtěte jejich text pomocí vlastnosti innerText.
6. Výsledek vraťte pomocí obslužné rutiny completion().

Vytvořte seznam všech obrázkových prvků na stránce pomocí následujícího příkazu:

var prvky = document.querySelectorAll("img");

Jiným příkladem může být načtení všech prvků třídy „post“:

var prvky = document.querySelectorAll(".post");

Po vytvoření seznamu NodeList můžete postupně procházet jednotlivé prvky (a dále je filtrovat nebo přidávat do datové struktury) pomocí cyklu:

var elements = . ;for (let element of elements) { // . }

V každém průchodu cyklu je aktuální element dostupný v proměnné element. Jeho text lze načíst například takto:

const text = element.innerText;

Vrácení načteného textu ze zkratky

Pokud má tato akce vracet data, musíte v JavaScriptu vyvolat obslužnou rutinu dokončení, např. completion(výsledek). Protože se JavaScript obvykle používá v asynchronních konstrukcích, toto volání záměrně není synchronní. Akci tak lze dokončit asynchronně.

Např. následující kód je platný:

window.setTimeout(function() { completion(true);}, 1000);

Výstup akce „Spustit JavaScript na webové stránce“ může být libovolného platného datového typu JSON, mezi něž patří:

• Řetězec
• Číslo
• Logická hodnota (true nebo false)
• Pole (obsahující libovolný jiný platný typ JSON)
• Slovník (obsahující libovolný jiný platný typ JSON)
• Null
• Nedefinováno

Aplikace Zkratky na pozadí automaticky kóduje a dekóduje vrácené hodnoty tak, aby mohla s JavaScriptem komunikovat. Před voláním obslužné rutiny dokončení tedy nemusíte volat JSON.stringify(výsledek).

Vzhledem k tomu, že návratová hodnota je ve formátu JSON, některé návratové hodnoty není vhodné používat. Kupříkladu pro funkce nebo objekty Node neexistuje v kódování JSON použitelná reprezentace.

V takovém případě se doporučuje vytvořit pole nebo slovník obsahující potřebné hodnoty, které budou kompatibilní s formátem JSON.

Pokud chcete, aby akce „Spustit JavaScript na webové stránce“ nevracela žádná data, můžete funkci completion() volat bez parametru (protože hodnota undefined je platný výstup). Výsledek je totožný s voláním completion(undefined).

Načtení více textů do pole

Pokud stránka obsahuje více odpovídajících elementů, je vhodné uložit jejich texty do pole a celé pole vrátit jako výsledek:

var prvky = document.querySelectorAll(".post");

var texty = [];

for (let element of prvky) {

texty.push(element.innerText);

}

completion(texty);

Výstupem je pole obsahující text každého nalezeného elementu. Pole patří mezi platné datové typy JSON a aplikace Zkratky je může dále zpracovat.

Načtení textu a dalších údajů

Z webové stránky nemusíte načítat pouze textový obsah. Můžete také číst atributy elementů a jednotlivé hodnoty ukládat do datové struktury.

Zkratky, které na webové stránce spouštějí vlastní JavaScript, mají nespočet různých využití. Mimo jiné můžete tímto způsobem vytvořit zkratky, které z webové stránky načtou určité údaje a tyto údaje pak použijí v další úloze, například načtou rozvrh hodin a přidají ho do aplikace Kalendář nebo vyexportují informace o členech skupiny na sociální síti a vloží je do tabulky.

Každý element má nějaké vlastnosti. Element <input> má například vlastnost value, v níž je uložena hodnota, kterou do daného pole uživatel zadal.

Můžete tak načíst text elementu pomocí innerText, jeho HTML obsah pomocí innerHTML nebo hodnotu formulářového pole pomocí value.

Změna stránky po načtení údajů

Můžete vytvořit i zkratky, které vám umožní webovou stránku změnit, například zobrazit její text jiným písmem nebo změnit rychlost přehrávání videa.

Objekty v DOM můžeme pomocí JavaScriptu měnit a tím samozřejmě měníme výslednou podobu webové stránky. Po stromu se můžeme pohybovat a do jeho větví přidávat nové elementy, měnit jejich obsah nebo je mazat.

Vlastnost innerText slouží k nastavení textu uvnitř vybraného elementu. V kalkulačce se výsledek zapisuje například takto:

vysledekElement.innerText = vysledek;

Stejný princip lze použít také při nahrazení textu načteného z webové stránky.

Časový limit a rychlost skriptu

Tak jako pro všechna javascriptová rozšíření v Safari platí i pro akci „Spustit JavaScript na webové stránce“ časový limit a je třeba, aby skončila co nejrychleji.

JavaScript nemusí skončit včas, pokud používá synchronní funkce, například:

• window.alert()
• window.prompt()
• window.confirm()

Několikasekundové časové limity, např.:

window.setTimeout(function() { completion(); }, 5000);

Pokud kód v JavaScriptu překročí časový limit, zkratka nedoběhne do konce a při jejím spuštění se zobrazí chybová zpráva Vypršel časový limit JavaScriptu.

Proto je vhodné vyhledat pouze potřebné elementy, zpracovat jejich text bez zbytečných prodlev a zavolat completion() po dokončení operace.

Ošetření syntaktických a běhových chyb

Při psaní skriptů v akci „Spustit JavaScript na webové stránce“ můžete používat libovolnou syntaxi, kterou Safari podporuje.

Akce „Spustit JavaScript na webové stránce“ v aplikaci Zkratky provádí před spuštěním zkratky v rozšíření Safari základní syntaktickou kontrolu a pomáhá vám tak odhalit chyby.

Při zadávání skriptu do textového pole se aktivuje zvýrazňování syntaxe, takže můžete snáz zkontrolovat platnost JavaScriptu. Jestliže například zapomenete na uvozovky na konci řetězce, zvýrazní se celý text, který za řetězcem následuje.

Pokud je syntaxe skriptu platná, ale při jeho zpracování dojde k běhové chybě, akce „Spustit JavaScript na webové stránce“ zachytí a zobrazí výjimky.

Odkazuje‑li váš skript například na neexistující proměnnou či funkci (např. shortcuts.completion()), za běhu se zobrazí chyba.

Události a načítání obsahu po akci uživatele

Kdykoliv se v naší aplikaci něco stane (uživatel něco někam zadá, někam klikne, dojde k chybě a podobně. ), JavaScript začne spouštět tzv. obsluhy událostí.

Události nalezneme jako vlastnosti na jednotlivých elementech z DOM. Často začínají na on, například onclick je událost kliknutí.

Nastavením události onclick v naší kalkulačce zajistíme, že se funkce zavolá pokaždé, když se na tlačítko klikne:

tlacitkoElement.onclick = secti;

Všimněme si, že když někam funkci ukládáme, neuvádíme závorky.

Stejný princip lze využít také pro načítání textu po kliknutí na tlačítko nebo po jiné události. JavaScript potom vyhledá elementy, načte jejich obsah a výsledek předá další části zpracování.

Bezpečnost a omezení

Při prohlížení webových stránek obecně nemáte k JavaScriptu přímý přístup. Spuštění skriptu je proto navázáno na aktivní webovou stránku v Safari a na příslušné oprávnění.

Vstupem akce „Spustit JavaScript na webové stránce“ musí být aktivní webová stránka v Safari, což znamená, že zkratku musíte spustit z listu sdílení.

Načtený text je nutné vybírat podle skutečné struktury konkrétní stránky. Pokud se změní id, název třídy nebo hierarchie elementů, původní selektor nemusí požadovaný obsah najít.

Výstup akce musí být kompatibilní s formátem JSON. Pro funkce nebo objekty Node neexistuje v kódování JSON použitelná reprezentace, takže je vhodné vracet textové hodnoty, čísla, pole nebo slovníky obsahující potřebné údaje.

Jednoduchý příklad práce s DOM

Nejprve si vytvořme opravdu jednoduchou webovou stránku, která bude obsahovat:

• dva elementy typu <input> pro zadání čísel,
• jedno tlačítko <button> pro provedení výpočtu.

Kalkulačka bude umět čísla jen sčítat, ale to nás zatím nebude trápit:

<!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta charset="UTF-8">
<title>Jednoduchá webová kalkulačka</title>
</head>
<body>
<h1>Jednoduchá webová kalkulačka</h1>
<input type="text" id="cislo1" size="5" /> + <input type="text" id="cislo2" size="5" />
<button id="tlacitko">Sečti!</button>
<p>Výsledek: <span id="vysledek"></span></p>
<script type="text/javascript">
</script>
</body>
</html>

Všimněte si, že všechny prvky, se kterými chceme z JavaScriptu pracovat, jsou opatřeny atributy id.

Všimněme si, že je náš skript vložený až na konci <body>. Kdybychom ho totiž vložili před elementy <input> a <button>, spustil by se ve chvíli, kdy ve stránce formulářové prvky ještě nejsou a nemohl by je používat.

Vytvořme si funkci secti(), která si pomocí výše vytvořených proměnných získá obsah elementů <input>, sečte je jako dvě čísla a výsledek zobrazí v řádkovém elementu <span>:

function secti(){
const cislo1 = parseFloat(cislo1Element.value);
const cislo2 = parseFloat(cislo2Element.value);
const vysledek = cislo1 + cislo2;
vysledekElement.innerText = vysledek;
}

Ve funkci secti() jsme použili také funkci parseFloat(), která převádí textové řetězce na desetinná čísla. Díky tomu vrátí naše kalkulačka správný výsledek.

Bez funkce parseFloat() bychom jako součet řetězců 10 a 20 získali jejich konkatenaci, a tedy 1020.

Na akce uživatele reagujeme pomocí událostí. Například do události onclick u tlačítka přiřadíme funkci, která se spustí po kliknutí.

tags: #jawa #script #nacteni #textu #z #cizi