Если вы вдруг пропустили, то уже пару лет существует браузерный механизм, который позволяет ссылаться на текст внутри страницы без специальной разметки. Называется он Text Fragments.
Раньше мы размечали какие-то важные элементы, на которые хотим ссылаться, атрибутом
id, к которому через #some-heading можно обращаться, чтобы браузер подскроллил до этого самого элемента. Беда в том, что всю страницу так не разметишь, а иногда хочется дать ссылку на какой-то конкретный абзац. Но зато можно было подсветить целевой документ на странице при помощи псевдокласса :target. Видел даже решение, когда на сайте у каждого абзаца всё-таки был свой id, который копировался по клику на абзац — странное решение, но, наверное, у авторов были на это причины.Text Fragments — это механизм, который позволяет ссылаться почти на любой текст на странице именно по его содержимому. Более того, пользователь может выделить текст, кликнуть правой кнопкой и нажать «Копировать ссылку на выделенный текст». Поисковая выдача гугла активно пользуется такими ссылками, отправляя не просто на страницу, а на конкретную часть страницы, причём на фрагмент подскролливается и искомый текст ещё и подсвечивается дефолтными браузерными стилями, если браузер умеет в псевдоэлемент
::target-text. Это уже работает в Chrome (Edge, Opera, etc.) и Safari.Интересно разобраться, как это работает и как собирать такие ссылки самому. Полный синтаксис ссылки на фрагмент выглядит так:
https://some.url/#:~:text=[prefix-,]textStart[,textEnd][,-suffix]Разделитель
#:~: говорит браузеру дальше парсить ссылку как ссылку на текстовый фрагмент. Кстати, можно почитать, почему синтаксис именно такой необычный.textStart — собственно, искомый текст. Но чтобы можно было выделить большие куски контента, не раздувая при этом ссылку, можно через запятую указать два фрагмента: textStart,textEnd. Браузер выделит от начала до конца, но самое короткое совпадение, нежадно. К слову, поэтому сам текст нужно энкодить, чтобы запятые становились %2C и не ломали парсер.prefix- и -suffix — это способ указать слова прямо перед или прямо после искомого текста. Так можно ещё больше уточнить фрагмент, на который вы хотите ссылаться. Дефисы — помощник для парсера, они обозначают «служебность» кусочков ссылки.Больше подробностей можно найти в статье на web.dev: https://web.dev/text-fragments/