Filtracja Tekstu HTML przy Użyciu Bibliotek i Narzędzi
- Szczegóły
Artykuł omawia zagadnienia związane z filtracją tekstu HTML, przedstawiając różne biblioteki i narzędzia, które mogą być wykorzystane do tego celu. Skupimy się na bibliotekach takich jak BeautifulSoup, jQuery oraz na wbudowanych filtrach w systemie CMS Joomla.
BeautifulSoup - Parsowanie i Filtracja HTML w Pythonie
Biblioteka BeautifulSoup jest szeroko stosowana do parsowania i manipulacji dokumentami HTML i XML w języku Python. Cała praca na stronie będzie się odbywać z użyciem obiektu klasy BeautifulSoup. Obiekt ten będzie reprezentował zawartość strony internetowej podczas jej przetwarzania. Przyjmuje on jako argument „konstruktora” tekst html strony. Podajemy mu ją jako tekst pobrany wcześniej za pomocą funkcji get biblioteki requests. Jako drugi argument „konstruktora” podajemy rodzaj parsera. Z użyciem tej biblioteki możemy parsować również pliki XML. W przedostatniej linii ustawiam jeszcze kodowanie.
Obiekt klasy BeautifulSoup (na który odtąd będę mówił zupa z racji że tak nazwałem zmienną) umożliwia wyszukiwanie elementów strony wg różnorakich kryteriów. Korzystając z nazw typów elementów - jak H1, TABLE, UL - możemy odnajdywać pierwsze wystąpienie takich elementów:
Jeśli jako argument funkcji find podamy rodzaj elementu, zostanie nam zwrócone pierwsze wystąpienie takiego elementu w pobranej stronie lub jej części. Na elementach klasy Tag można wykonywać takie same operacje przeszukiwania jak na „zupie”. Toteż umożliwia to dalsze wchodzenie w głąb struktury. Równoznaczne byłoby zastosowanie funkcji find:
Wyszukiwanie Elementów
Funkcja find pozwala na wyszukiwanie elementów na podstawie różnych kryteriów:
Przeczytaj także: Definicja i pomiar filtracji kłębuszkowej
- Po ID elementu: Jeśli element posiada ID, można go odnaleźć stosując argument id dla funkcji find.
- Po klasie CSS: Funkcja find przyjmuje również argument class_ umożliwiający odniesienie się do klasy CSS wyszukiwanego elementu. W sytuacji gdyby kilka elementów posiadało tę samą klasę (co jest całkiem naturalne) funkcja zwróci pierwsze wystąpienie takiego elementu.
- Po atrybutach elementu: Funkcja find posiada argument attrs. Podajemy do niego słownik z nazwami atrybutów i charakteryzującymi je wartościami.
Zagnieżdżanie
Każdy element zwracany przez funkcję find, ale również opisywane wcześniej uchwyty odnoszące się do nazw tagów html będą zwracały obiekt klasy Tag. Taki obiekt pozwala zagnieżdżać się dalej. W zasadzie nie ma tu ograniczeń ilościowych. Poniżej przykład takiego zagnieżdżania:
Atrybuty elementów
Obiekty klasy BeautifulSoup i Tag posiadają pole attrs zawierające w postaci słownika atrybuty elementu.
Skoro to słownik to możemy go tak właśnie przetwarzać. Dopisuję jeszcze jedną linijkę kodu do skryptu by dostać się do wartości dla klucza „width”:
Name i String
Każdy element ma name, nie każdy ma string. Name służy do sprawdzania nazwy elementu. Może to być użyteczne do sprawdzania jakiego rodzaju jest element wyszukany np. po id albo klasie. String do zawartość elementu - tekst z pomiędzy tagów początkowego i końcowego. Uwaga - nie każdy element będzie miał tam jakąś wartość - nie będą jej miały elementy będące jedynie kontenerami.
Operowanie na listach elementów i funkcja find_all
Dotychczas operowaliśmy funkcją find, bądź odnosiliśmy się do pierwszych wystąpień elementów. Za każdym jednak razem pracowaliśmy z pojedynczym obiektem. Teraz przyszedł czas na przetwarzanie list elementów. Dla funkcji find_all działają te same filtry co dla funkcji find. Możesz wyszukiwać elementy w oparciu o ich id, klasę css czy atrybuty. Różnica polega jednak na tym, że tym razem nie dostaniemy w wyniku obiektu klasy Tag, a ResultSet. Jest to implementacja wzorca projektowego Iterator. Na początek użyjemy funkcji find_all bez jakichkolwiek argumentów. W efekcie dostaniemy listę wszystkich elementów (pierwszego poziomu zagnieżdżenia ale i tych głębiej) występujących w dokumencie. Iteruję po zwróconej liście i wyświetlam nazwy typu elementu:
Przeczytaj także: Webber AP8400 - wymiana filtrów
Filtrowanie elementów z funkcją find_all
Podobnie jak funkcja find, funkcja find_all przyjmuje różnorakie argumenty. Wszystkie argumenty omawiane dla funkcji find mają zastosowanie również tutaj. Poniżej przykład wyszukiwania i wyświetlania tylko elementów będących punktami listy:
Jeśli chcielibyśmy wyciągnąć tylko punkty zawarte na liście znajdującej się w div o id „sekcja4” to zgodnie z zasadami zagnieżdżania omówionymi wcześniej robimy to w ten sposób:
Alternatywnie można ten sam efekt osiągnąć wyszukując elementy wg klasy css. Dla poniższego kodu wynik jest identyczny z powyższym.
Contents
Pole contents pozwala nam zaglądać do elementów zawartych w konterze. W naszym kodzie html mamy tabelkę:
Chcemy docelowo dobrać się do tekstu „Antarktyda”. Jest to druga kolumna drugiej linii tabeli. Zobaczmy więc co znajduje się w polu contents tabeli, ile jest tam elementów i jakiego typu dane znajdziemy w contents:
Przeczytaj także: Optymalne rozcieńczenie bimbru
Powyższy kod zwraca nam informację o 7 elementach. Jest to kolekcja typu lista, a zawartość tej listy to kolejne wiersze tabeli, oraz znaki „enter”:
Szukamy gdzie ta nasza Antarktyda. Znajduje się ona w elemencie o indeksie 1. Wydrukujmy więc ten element:
Dobraliśmy się do wiersza:
Taki wiersz również ma składowe - kolumny. Zobaczmy jak BS4 to rozbije:
Nasz wiersz składa się zatem z kolumn oraz znaków „enter” będących pozostałością po formatowaniu dokumentu. Fraza „Antarktyda” znajduje się w elemencie o indeksie 3. Zajrzyjmy więc do niego:
Teraz możemy odnieść się do „string” aby dobrać się do poszukiwanej frazy:
Zamiast rozbijać wyszukiwanie na atomy, możemy skorzystać z zagnieżdżania:
jQuery - Filtracja Elementów HTML
Biblioteka jQuery oferuje elastyczne narzędzia do manipulacji DOM (Document Object Model). Można jej użyć do filtrowania elementów HTML na podstawie różnych kryteriów.
Zasada działania jest bardzo prosta: bierzemy dowolny element, z którego chcemy odsiać niepożądane przez nas elementy. Następnie przy pomocy document.querySelectorAll pobieramy dwa zbiory elementów: wszystkie elementy z naszego filtrowanego kontenera oraz wszystkie dozwolone elementy (czyli te, które chcemy zostawić).
Cała magia powyższego kodu sprowadza się do wywołania allElements.filter, które tworzy nam tablicę z wynikami spełniającymi warunek. Można go przeczytać jako „element spełnia warunek jeśli nie należy do zbioru allowedElements”.
Pętla będzie się wykonywać tak długo jak element będzie miał dzieci. Każde dziecko jest wyciągane ze swojego rodzica, po czym wstawiane tuż przed nim (brzmi to makabrycznie, czyż nie?).
Podstawy Pracy z jQuery
Swobodne manipulowanie zawartością strony możliwe jest dopiero wówczas, gdy nasz dokument jest „gotowy”. Biblioteka jQuery wykrywa ten stan gotowości za pomocą konstrukcji $(document).ready().
Podstawą pracy z jQuery jest „wybieranie elementów i wykonywanie na nich operacji”. Biblioteka jQuery obsługuje większość selektorów CSS 3, a także pewną liczbę niestandardowych selektorów.
Jednym ze sposobów na poprawienie wydajności kodu JavaScript jest wybór odpowiednich selektorów. Jeśli jesteśmy zbyt mało szczegółowi, znalezienie żądanych elementów może okazać się bardzo żmudne (przykład: uwzględnienie elementu div podczas wybierania elementów wg nazwy klasy). Ogólna zasada brzmi: jeśli tylko możesz, staraj się podpowiedzieć jQuery gdzie mogą znajdować się szukane przez ciebie elementy. Z drugiej strony nie należy jednak popadać w przesadę. Jeśli koniecznie musimy użyć takich selektorów, mogą się one okazać przydatne, lecz są jednocześnie bardzo wolne - zdarzyło mi się kiedyś napisać oparty na atrybucie selektor, przez który strona odmówiła posłuszeństwa na dobrych kilka sekund.
Każde zaznaczenie wymaga wykonania wielu linijek kodu, który nie jest przechowywany przez jQuery w pamięci podręcznej.
Kiedy już zapiszesz efekt wyboru w zmiennej, możesz wywołać na niej metody jQuery. Czasem może się zdarzyć, że wybrany zbiór zawiera więcej elementów niż potrzeba - wówczas możemy go dopracować.
W bibliotece jQuery znajdziemy kilka pseudoselektorów, które ułatwiają znajdowanie elementów formularzy.
Metody Pobierające i Ustawiające
Kiedy już dokonaliśmy wyboru elementów, możemy na nim wywołać metody. Ogólnie wyróżnia się dwa typy metod: pobierające i ustawiające.
Metody występujące w bibliotece jQuery są „przeciążone”, co oznacza, że metody wykorzystywane do ustawiania wartości oraz metody służące do ich pobierania zazwyczaj noszą taką samą nazwę. Metoda, która ma za zadanie ustawić jakąś wartość nazywana jest metodą ustawiającą. Metodą pobierającą natomiast nazywa się metodę, która ma pobrać - bądź odczytać - jakąś wartość.
Metoda ustawiająca zwraca obiekt jQuery, dzięki czemu możesz kontynuować wywoływanie metod jQuery na swoim wyborze.
Metoda $.fn.css jest bardzo przydatna jako metoda pobierająca. Nie należy jej jednak używać jako metody ustawiającej w ostatecznej wersji kodu, ponieważ nie chcemy, aby w naszym kodzie JavaScript znajdowały się informacje prezentacyjne.
Kod z przykładu 3.21 tylko w pobieżny sposób przedstawia funkcjonalność wymiarów w bibliotece jQuery.
Metoda $.fn.attr może być wykorzystana zarówno jako metoda pobierająca, jak i ustawiająca.
Możesz także, przy pomocy metody $.fn.each, przejść iteracyjnie przez zestaw wybranych elementów. Metoda ta iteruje przez wszystkie wybrane elementy i dla każdego wykonuje funkcję. Funkcja jako argumenty otrzymuje indeks obecnego elementu i sam element ze struktury DOM.
Manipulacja Elementami
Kiedy już dokonałeś wyboru elementów, zaczyna się cała zabawa - elementy możesz zmieniać, przenosić, usuwać, a nawet klonować. Istnieje wiele sposobów na zmianę istniejącego elementu. Najczęściej zmieniamy wewnętrzny kod HTML, bądź atrybut elementu - w bibliotece jQuery do tego typu manipulacji dostępne są proste metody, które zapewniają prawidłowe działanie kodu w każdej przeglądarce. Z tych samych metod, w formie metod pobierających, można również skorzystać w celu pobrania informacji na temat elementów.
Istnieje wiele sposobów na przenoszenie elementów w obrębie struktury DOM. Przykładowo w biliotece jQuery dostępne są metody $.fn.insertAfter oraz $.fn.after. Metoda $.fn.insertAfter umieszcza wybrane elementy za tym elementem, który przekaże się jej jako argument. Z kolei metoda $.fn.after umieszcza element będący jej argumentem za wybranym elementem. Wybór odpowiedniej metody zależy od wybranych elementów, a także od tego, czy będziesz musiał przechowywać odwołania do elementów dodawanych na stronę. Jeśli potrzebujemy odwołań, zawsze korzystamy z pierwszego sposobu - umieszczamy wybrane elementy względem innego elementu. Wówczas umieszczane przez nas elementy są zwracane.
Metody takie jak $.fn.appendTo służą do przenoszenia elementów.
Są dwa sposoby usuwania elementów ze strony: $.fn.remove i $.fn.detach. Jeśli jednak zależy ci na zachowaniu danych i zdarzeń, użyj metody $.fn.detach. Podobnie jak w przypadku $.fn.remove wybrane elementy zostają zwrócone, ale powiązane z nim dane i zdarzenia są zachowane.
Ściśle rzecz biorąc, utworzonego elementu nie trzeba przechowywać w zmiennej - aby dodać element do strony wystarczy natychmiast po wywołaniu $() wywołać odpowiednią metodę.
Biblioteka jQuery umożliwia manipulowanie atrybutami na wiele sposobów. Proste zmiany można wprowadzić bardzo łatwo, ale metoda $.fn.attr pozwala na o wiele bardziej skomplikowane manipulacje. Możemy ustawić albo wartość bezpośrednią, albo wartość zwrotną funkcji.
Filtry Tekstu w CMS Joomla!
CMS Joomla! oferuje wbudowane mechanizmy do filtrowania tekstu, które pomagają chronić witrynę przed atakami i niepożądanymi znacznikami HTML.
Do dyspozycji masz pięć ustawień, które już zaraz po instalacji CMS Joomla! są tak skonfigurowane, aby chronić witrynę przed stosowaniem znaczników wykorzystywanych w atakach na strony internetowe.
Domyślna czarna lista - ustawienie tego filtra spowoduje usuwanie następujących znaczników: applet, body, bgsound, base, basefont, embed, frame, frameset, head, html, id, iframe, ilayer, layer, link, meta, name, object, script, style, title, xml. Usuwane będą także atrybuty: action, background, codebase, dynsrc, lowsrc. Możesz uzupełnić tę listę o własne znaczniki, wpisując je w pole Filtruj znaczniki, oraz własne atrybuty, wpisując je w pole Filtruj atrybuty. Możesz także zdefiniować bardziej restrykcyjne filtry, na przykład umożliwiając autorom umieszczanie tekstu tylko z podstawowymi znacznikami HTML, takimi jak: p, b, i, em, br, a, ul, ol, li, img. Pamiętaj, że ustawienie zdefiniowane w zakładce Filtrowanie tekstu działają bez względu na używany edytor.
tags: #filtracja #tekstu #html #biblioteki
