Napisałem se wczoraj prosty filtr HTML-a, któremu wystarczy przekazać selektor CSS (a raczej: supersetu CSS) i cała reszta dzieje się magicznie. Całość jest dostępna na npm, więc wystarczy wywołać
Kod
npm install @comandeer/css-filter
a następnie dodać bibliotekę do strony:
Kod
<script src="node_modules/@comandeer/css-filter/dist/css-filter.umd.js"></script>
następnie używamy:
Kod
const filter = cssFilter.default( 'i' );
const filtered = filter.filter( `<div>
<span>
<i>Only i tag will be preserved</i>
</span>
</div>` );
console.log( filtered.innerHTML ); // <i>Only i tag will be preserved</i>
const filtered = filter.filter( `<div>
<span>
<i>Only i tag will be preserved</i>
</span>
</div>` );
console.log( filtered.innerHTML ); // <i>Only i tag will be preserved</i>
Napisałem, że jest używany superset CSS. Jest on wzorowany na pomyśle, który występuje w Advanced Content Filter w CKEditor 4. Do normalnych selektorów CSS dodałem możliwość prostego zapisu stylów, np.
Kod
p{background-color} // zostanie zamienione na p[style*="background-color" i]
Na upartego można się nawet pobawić w stworzenie własnej składni, tworząc własny parser reguł (klasę/obiekt z metodami parse i join) i przekazując go jako drugi parametr do cssFilter.Filter:
Kod
const filter = new cssFilter.Filter( rules, new CustomRuleParser() );
Całość jest dostępna na GitHubie + ma testy (nawet dość sporo). Kod to czysty ES6, przez co (i przez fakt korzystania z case-insensitive selektorów) biblioteka działa jedynie w najnowszych wersjach Chrome, Firefoksa, Safari… i być może Edge
Ciekawostką jest na pewno klasa FilteredDocumentFragment, czyli DocumentFragment z dodaną własnością innerHTML. Ot, taki mały eksperymencik.
Mam nadzieję, że do czegoś się to komuś przyda.