[JavaScript] CSS Filter |
[JavaScript] CSS Filter |
13.08.2016, 12:55:38
Post
#1
|
|
Grupa: Zarejestrowani Postów: 1 268 Pomógł: 254 Dołączył: 11.06.2009 Skąd: Świętochłowice Ostrzeżenie: (0%) |
Tak, wiem, wrzucanie do oceny na forum o PHP skryptu JS zakrawa na lekką prowokację, no ale
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> 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. Ten post edytował Comandeer 13.08.2016, 13:10:59 -------------------- ★Mój blog || Okiem krytyka★
|
|
|
Wersja Lo-Fi | Aktualny czas: 6.06.2024 - 06:18 |