[JavaScript] CSS Filter

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ć

npm install @comandeer/css-filter

a następnie dodać bibliotekę do strony:

<script src="node_modules/@comandeer/css-filter/dist/css-filter.umd.js"></script>

następnie używamy:
 

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>

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.
 

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:
 

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.