Direct naar de inhoud

Handboek HTML5 en CSS3HTML en CSS van <a> tot z-index

JavaScript maakt tekst van HTML

Dit is zo’n handig klein scriptje dat ik het hier graag even plaats. Het maakt tekst van HTML-elementen, zodat u in een webpagina HTML-code (tags met punthaken) kunt laten zien zonder dat u alle punthaken moet omzetten naar veilige codes. In het boek vindt u die codes in de paragraaf Speciale tekens in webpagina’s.

Dit is het script:

window.onload = () => {
  const elms = document.querySelectorAll('.html')
  elms.forEach(elm => 
    elm.textContent = elm.innerHTML.toString())
}

Waarom is dit nuttig? In het boek staan afbeeldingen van codevoorbeelden met de HTML en wat de browser daarvan maakt. Daarvoor schrijf ik de code, open de pagina in de browser en maak dan een schermafbeelding. Wil ik tags laten zien, bijvoorbeeld <article>, dan kan ik die niet gewoon in de tekst typen. De browser ziet namelijk een tag en zet die om, dat is zijn werk. De browser moet dus eigenlijk om de tuin worden geleid om een resultaat zoals in de afbeelding te krijgen.

Html code in browser tonen

Niet zulke goede oplossingen

Oplossing 1: zet alle punthaken van code die u als code wilt laten zien, om naar &lt; en &gt;. Deze codes maken ook punthaken, maar pas nadat de browser alle echte tags heeft omgezet (geparseerd). U kunt dit bijvoorbeeld doen met zoek en vervang in de editor.

De nadelen van oplossing 1 zijn de extra handelingen en dat de code met de gecodeerde punthaken verder onbruikbaar is.

Oplossing 2: automatiseer met JavaScript het zoeken en vervangen. Dat scheelt werk, maar het resultaat blijft verminkte code.

Wel een goede oplossing

Oplossing 3: maak platte tekst van de HTML-code, zodat de browser de inhoud van de punthaken gewoon niet als tags ziet. Dit kan alleen worden gedaan met een script dat wordt uitgevoerd nadat de browser de pagina heeft geladen. Moderne browsers bieden talloze manieren om HTML-pagina’s programmatisch te bewerken (zelfs volledig op te bouwen) en een van de manieren is de interface node van het DOM (Document Object Model). Een complete uitleg gaat hier te ver, maar zie een node als een element van het HTML-document. Die interface biedt toegang tot bijvoorbeeld ouders en kinderen van de node, attributen en ook de tekst in die node. De textContent is alles tussen de open- en sluittag van de node wat geen HTML-tag is.

Uitleg van het script

window.onload = () => {
  const elms = document.querySelectorAll('.html')
  elms.forEach(elm => 
    elm.textContent = elm.innerHTML.toString())
}

De functie wordt uitgevoerd zodra de pagina is geladen: de gebeurtenis onload van het object window. (De traditionele notatie is window.onload = function() {.) Eerst worden met document.querySelectorAll('.html') alle elementen met de klasse .html verzameld in de variabele elms. Dit is een node list.

De node list wordt element voor element doorlopen met forEach. Van elk gevonden element wordt de innerHTML omgezet naar een string en die wordt toegewezen aan de textContent van dat element. De innerHTML bestaat uit alle tags en tekst binnen het element dat de klasse .html heeft. Dat is alles.

Een voorbeeld

Schrijf wat HTML-code of neem de code uit de afbeelding over en plaats die in de elementen <code><pre class="html">. Met <code> geeft u aan dat de inhoud van het element code is en met <pre> wordt de witruimte behouden. De klasse .html laat het script zijn werk doen. Dat zet alles tussen <pre class="html"> en </pre> om naar tekst. Plaats het script onder in de HTML-pagina, vlak boven de sluittag </body>, en zet er <script>-tags omheen.

Tags: javascript, html


Reageer op dit artikel

* Vul a.u.b. alle velden in.