Dnes ráno jsem potřeboval převést prvek DOM na bodnutí. A v té době jsem zapomněl na el.outerHTML metoda. A znám el.innerHTML nebude zahrnut do samotného prvku. Poskytne pouze vnitřní HTML. Takže poté, co jsem udělal rychlý Google, jsem byl upozorněn na outerHTML metoda. A můj problém byl vyřešen!

Ale tohle mě přivedlo na myšlenku, jak bych to mohl udělat, kdyby tam nebylo innerHTML nebo outerHTML metoda.
A tak se zrodil htmlToString.

htmlToString

Převést prvek html/DOM na řetězec

Funguje s vykresleným a virtuálním DOM

Instalace

npm install htmltostring

Nebo pomocí CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/htmlToString.min.js"></script>

Využití

//you don't have to import if you're using CDN
import htmlToString from 'htmltostring'

console.log(htmlToString('.container'))
// or 
// const container = document.querySelector('.container')
// console.log(htmlToString(container))

Ukázkový výstup

<div class="container">
    <h1>Hello World</h1>
</div>

A bylo to velmi jednoduché pomocí rekurze.

Byly tam jen tři hlavní otázky.

1. Jaký je název tagu prvku
2. Jak zobrazit všechny atributy v prvku HTML
3. Zkontrolujte, zda je značka samozavírací či nikoli

A zde jsou odpovědi

Jaký je název tagu prvku

Takto snadno získáte název tagu prvku

let tagName = el.tagName.toLowerCase()

Jak získat všechny atributy obsažené v prvku HTML

el.attributes vrátí seznam atributů přítomných na prvku.

[...el.attributes].map(e => `${e.name}="${e.value}"`).join(" ")

//example outcome
//'class="main" type="text"'

Zkontrolujte, zda je značka samozavírací nebo ne

Nejprve můžeme vytvořit pole nebo samozavírací značky a poté zkontrolovat, zda je v poli přítomen název značky

const selfClosingTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']
if(selfClosingTags.includes(tagName)){
    console.log("Self closing tag")
}

A se všemi zodpovězenými otázkami byla funkce implementace velmi snadná.
Celý kód můžete vidět zde

Přišlo vám to zbytečné, myslím užitečné? U mě káva ☕

Určitě se podívejte na mé další články a na YouTube kanál

Shuvo

Podpořte mě na Patreonu