Link do zdania: adresy URL z text fragment

Link do wyróżnionego tekstu

Link do tekstu: adresy URL z text fragment i Kopiuj link do wyróżnienia | We.Inc

Utwórz link, który przewija do wybranego zdania na dowolnej stronie i je podświetla, dzięki #:~:text=. Składnia, zasady kodowania, obsługa przeglądarek, stylowanie przez ::target-text i generator linków.

Text fragment to dodatek do adresu internetowego, #:~:text= z dopisanymi słowami ze strony, który sprawia, że przeglądarka przewija do tych słów i je podświetla. Polecenie Kopiuj link do wyróżnienia w Chrome tworzy go za Ciebie, a ręcznie możesz go zbudować z opcjonalnymi częściami: początkiem, końcem, prefiksem i sufiksem.

Pierwsze wersje przeglądarek obsługujące text fragments (caniuse, październik 2026)

Przeglądarka
Obsługiwane od

Chrome

Edge

Safari

Firefox

Wysłanie klienta do dokładnej linii regulaminu zwrotów albo wskazanie klientowi jednego akapitu długiej oferty jest lepsze niż „przewiń trochę w dół”. Linki z text fragment robią to wyłącznie dzięki dłuższemu adresowi URL; właściciel strony nie musi dodawać kotwic. Wklej adres strony i fragment tekstu do generatora, aby utworzyć taki link.

Skopiuj adres strony, do której chcesz linkować.
Skopiuj z tej strony dokładne słowa do podświetlenia, tak aby każda część mieściła się w jednym akapicie lub nagłówku.
W przypadku długiego fragmentu podaj tylko kilka pierwszych słów jako początek i kilka ostatnich jako koniec.
Dodaj prefiks lub sufiks tylko wtedy, gdy te same słowa występują na stronie więcej niż raz.

Dopasowanie ignoruje wielkość liter, więc nie ma znaczenia, jak je zapiszesz.
Jeśli nic nie pasuje, MDN podaje, że fragment jest ignorowany, a strona otwiera się na górze, więc uszkodzony link zawodzi łagodnie.
Jeśli później zmienisz treść strony, link może przestać podświetlać. Wybieraj sformułowania, które raczej się nie zmienią.
Aby podświetlić dwa oddzielne fragmenty, połącz je znakiem ampersand: #:~:text=first&text=second.

Najczęściej zadawane pytania

Jak skopiować link do wyróżnionego tekstu w Chrome?

Zaznacz tekst na stronie, kliknij go prawym przyciskiem myszy i wybierz Kopiuj link do wyróżnienia. Pomoc Chrome zaznacza, że jeśli nie możesz wybrać tej opcji, funkcja może nie działać dla tej treści.

Czy linki z text fragment działają w Firefox i Safari?

Tak, w aktualnych wersjach. caniuse podaje obsługę od Safari 16.1 i Firefox 131, a także Chrome 81 i Edge 83. Starsze przeglądarki po prostu otwierają stronę na górze.

Dlaczego mój link z text fragment niczego nie podświetla?

Słowa mogą nie występować dokładnie w tej formie, jedna część może obejmować dwa akapity albo myślnik w tekście nie został zakodowany procentowo. Według MDN tekst wewnątrz iframe nigdy nie jest przeszukiwany.

Czy moje własne skrypty mogą odczytać text fragment?

Nie. MDN wyjaśnia, że przeglądarki usuwają dyrektywę :~: z adresu URL podczas ładowania, więc skrypty strony nie mogą jej odczytać. Obsługę możesz wykryć za pomocą document.fragmentDirective.

Czy mogę uniemożliwić innym linkowanie w ten sposób do tekstu na mojej stronie?

Według MDN przeglądarki oparte na Chromium respektują nagłówek odpowiedzi Document-Policy: force-load-at-top, który wyłącza dla strony przewijanie do text fragment.

Części składni

Pełna forma to #:~:text=[prefix-,]textStart[,textEnd][,-suffix]. Wymagany jest tylko textStart. Po dodaniu textEnd przeglądarka podświetla wszystko od słów początkowych do słów końcowych.
Prefiks kończy się myślnikiem, a sufiks się od niego zaczyna. Nie są podświetlane; jedynie mówią przeglądarce, o które wystąpienie powtarzającej się frazy chodzi.

Zasady kodowania

Każda część musi być zakodowana procentowo, co zamienia spacje na %20. MDN dodaje, że sam myślnik musi być zakodowany jako %2D, bo goły myślnik zostałby odczytany jako znacznik prefiksu lub sufiksu.
Przecinki i ampersandy oddzielają części i fragmenty, więc zakodowanie także ich, jako %2C i %26, chroni przed błędnym odczytaniem. Generator na tej stronie robi to wszystko za Ciebie.

Przykłady każdej formy

Formy text fragment i to, co podświetlają

Fragment
Podświetla

Pierwsze wystąpienie „opening hours”

Od „Delivery takes” do „business days”

„closed” tylko tam, gdzie następuje po „Saturday”

Pierwsze „price” i pierwsze „deposit”

Stylizuj podświetlenie na własnej stronie

Przeglądarki wybierają domyślny kolor podświetlenia. Pseudoelement ::target-text pozwala dopasować go do Twojej marki.

Własne kolory ::target-text

Zachowaj silny kontrast między tekstem a kolorem podświetlenia.

Wykrywanie obsługi

document.fragmentDirective jest obiektem w przeglądarkach, które to obsługują, a w pozostałych ma wartość undefined.

Generator linków z text fragment

Adres strony

Słowa do podświetlenia (lub początek długiego fragmentu)

Koniec fragmentu (opcjonalnie)

Słowa tuż przed (opcjonalnie)

Słowa tuż po (opcjonalnie)

Twój link

Otwórz link w nowej karcie

Wpisz pełny adres zaczynający się od https://

Wpisz słowa do podświetlenia.

Zacznij za darmo · Bez karty kredytowej

Powiązane: Poradniki

Produkt

Dla kogo

Funkcje

Zasoby

Firma

Mapa strony