Как выделить несколько фрагментов текста в браузере
Обновлено: 24.11.2024
Link to Text Fragment – это новое расширение Chrome от Google, которое позволяет создавать URL-адреса для определенного текста на веб-странице независимо от форматирования страницы.
Установив расширение, просто выделите текст, на который хотите создать ссылку, щелкните правой кнопкой мыши и выберите «Копировать ссылку на выделенный текст». Затем этим может поделиться и открыть любой, использующий совместимый браузер. Например, нажав на эту ссылку в Chrome или Edge, вы перейдете прямо к выделенному разделу внизу статьи.
Ссылки, созданные расширением, совместимы со всеми браузерами на базе Chromium версии 80 и выше, но поддерживаются не во всех браузерах. В сообщении в блоге Google отмечается, что по состоянию на вчерашний день Firefox и Safari не сообщали о реализации этой функции. Нажав на ссылку в этих браузерах, вы просто перейдете к началу связанной веб-страницы, не выделяя текст.
Фрагменты текста – это небольшая, но полезная функция, упрощающая поиск конкретной информации на веб-странице. Например, в приведенном выше абзаце гиперссылка на сообщение в блоге Google настроена так, чтобы напрямую указывать на раздел о совместимости Firefox и Safari. Вы также можете увидеть, что это полезно для ссылки на определенный шаг в длинной серии инструкций или на конкретную запись в списке лучших.
Расширение и функциональность, которые оно обеспечивает, многообещающи, но пока не идеальны. При тестировании этой функции в Edge я иногда получал ссылку на правильную часть страницы, но текст не выделялся. Затем при создании ссылок я иногда получал сообщение об ошибке, говорящее мне выделить более длинный фрагмент текста, несмотря на то, что я уже выделил целый абзац. Мне не удалось проверить, что именно в моей комбинации браузера, расширений и веб-сайтов, на которые я ссылался, вызвало эти проблемы.
Расширение Link to Text Fragment теперь доступно в Интернет-магазине Chrome.
Статьи о фронтенд-разработке, UX и многом другом. Все статьи написаны Майклом Гироном. Хостинг сайта принадлежит Krystal, одному из первых хостов, на 100 % использующих возобновляемые источники энергии.
Последнее обновление: 18 августа 2021 г.
Что такое текстовые фрагменты?
Функция прокрутки до текстового фрагмента поддерживает указание фрагмента текста в хеше URL. Поэтому, если я щелкну ссылку, указывающую фрагмент, я перейду к этому фрагменту текста на странице, и пользовательский агент (браузер) выделит его, чтобы привлечь мое внимание.
Где это используется
Одним из примеров является поиск Google. Когда вы что-то ищете и нажимаете на результат, Google использует текстовые фрагменты, чтобы выделить текст, который, по мнению Google, является ответом на ваш поисковый запрос. Выделенный текст обычно выделяется ярко-желтым цветом маркера, что, безусловно, заметно.
Как это можно использовать?
Группа сообщества Web Platform Incubator предлагает два варианта использования этой функции.
Во-первых, его можно использовать как способ ссылки на точные текстовые ссылки на других веб-страницах. Хорошим примером является ссылка Википедии на точный текст для своих реферальных ссылок. В качестве альтернативы, как мы видели в случае с поиском Google, пользователь может быть связан с точным местом, где его ответ может быть на веб-странице, полученной из поисковой системы.
Второй вариант использования предназначен для тех, кто хочет поделиться определенным фрагментом текста. Таким образом, у вас может быть функция, позволяющая пользователям копировать URL-адрес определенной части веб-страницы.
Совместимость с браузером
В настоящее время текстовые фрагменты поддерживаются в браузерах на базе Chromium, начиная с версии 80, включая Edge 83, а также в браузерах Opera 68 и Android. Он не поддерживается в Firefox и Safari, и на данный момент они не собираются поддерживать эту веб-функцию.
Как использовать фрагменты текста
текстНачало
Хотя это звучит очень сложно, на самом деле им легко пользоваться. Во-первых, давайте рассмотрим самый простой способ использования текстовых фрагментов.
Первый шаг — получить URL-адрес страницы, на которую вы хотите сослаться, например:
Затем вам нужно добавить :~:text= :
Наконец, вам нужно добавить textStart, который является текстом, который вы хотите выделить, поэтому в нашем примере это может быть:
textStart и textEnd
В предыдущем примере нам удалось создать ссылку на заголовок веб-страницы без использования тега ID. Но что, если мы хотим выделить весь абзац о сборах за возврат подтверждающих документов? Было бы нецелесообразно помещать весь текст в URL-адрес.
Вместо этого мы можем использовать синтаксис textStart и textEnd, чтобы указать, с чего начать выделение и где закончить. Между textStart и textEnd нам просто нужно добавить запятую.
Возвращаясь к нашему примеру, нам нужно обновить наш URL, чтобы он выглядел следующим образом:
Что мы сделали, так это сказали, что textStart — это Fees%20for%20returning%20supporting%20documents с последующей запятой, а затем добавили наш textEnd, который выглядит следующим образом: if%20you%20want%20to%20use%20it . Наш пример фрагмента теперь выглядит так:
префикс и суффикс
До сих пор в наших примерах было довольно легко использовать текстовые фрагменты для ссылки на определенную часть страницы. Однако одна из проблем с приведенными выше примерами заключается в том, что URL-адрес постепенно становится немного длиннее. Если бы мы захотели, мы могли бы сократить его.
Но тогда мы сталкиваемся с проблемой — есть два случая, когда слова «подтверждающие документы» стоят рядом друг с другом, так какой из них мы говорим выделить? Чтобы решить эту проблему, мы могли бы использовать параметры префикса и суффикса, чтобы указать, какое слово должно идти до или после слов, которые мы пытаемся выделить.
В нашем случае мы могли бы сказать, что ищем префикс «Ваш» перед словами «подтверждающие документы», поэтому теперь наш фрагмент URL может быть:
Если слово (слова) в конце вашего текстового фрагмента часто используются на вашей странице, вы можете использовать суффикс, чтобы привлечь внимание к определенному употреблению. Например, если вы хотите выделить конкретное использование слова «документы», вы можете сделать следующее:
Что такое директива фрагмента?
Теперь в головоломке отсутствует только одна часть. (Новая) директива фрагмента ( :~: ).
Этот фрагмент зарезервирован для агента пользователя (браузера) text=, а затем удаляется из URL-адреса во время загрузки веб-страницы, чтобы авторские сценарии не могли его использовать.
Что особенно интересно в этой новой директиве фрагмента, так это то, что ее можно будет использовать в будущих функциях, таких как подсказки перевода или включение функции специальных возможностей. Предотвращение прямого взаимодействия автора с директивой фрагмента также означает, что эти функции могут быть реализованы без нарушения существующего контента.
Полный синтаксис
Теперь мы рассмотрели все различные варианты и способы использования текстовых фрагментов. Напомним, что все значения всех параметров должны быть закодированы в процентах. Это особенно важно для символов дефиса (-), амперсанда (&) и запятой (,), поэтому они не интерпретируются как часть синтаксиса текстовой директивы.
Чувствительность к регистру
Также стоит отметить, что текстовый фрагмент нечувствителен к регистру, поэтому прописные и строчные буквы будут обрабатываться одинаково.
Смешивание традиционных ссылок на элементы с текстовыми фрагментами
Можно использовать комбинацию ссылки на элемент, а затем выделить текст внутри этого фрагмента текста. Это дает вам преимущество, если текст изменяется, вы по-прежнему ссылаетесь на этот раздел, поэтому пользователь может приблизиться к разделу текста, на который вы ссылаетесь, или хотите, чтобы пользователь его увидел.
Несколько текстовых фрагментов
В URL-адресе может быть несколько текстовых фрагментов. Вы можете сделать это, просто используя символ амперсанда (&), чтобы разделить несколько фрагментов, которые вы хотите выделить на странице. Например:
Это позволит выделить первое слово «документы» и перейти к нему, а также выделить любые слова, которые говорят «подтверждающие документы», если они стоят после слова «ваш», с использованием префикса -.
Расширение для браузера
В Интернет-магазине Chrome есть расширение, которое позволяет пользователям выбирать и копировать ссылку на фрагмент текста через контекстное меню. Затем вы можете отправить URL-адрес другим людям через электронную почту, социальные сети и текстовые сообщения. Пока они открывают ссылку в поддерживаемом браузере, текстовый фрагмент будет выделен.
Дополнительная литература
Если вам понравилась эта статья, вы можете найти меня в Твиттере или вот несколько других статей, которые я недавно написал:
Текстовые фрагменты позволяют выделить фрагмент текста в фрагменте URL-адреса.
При переходе по URL-адресу с таким фрагментом можно выделить его и привлечь к вниманию пользователя.
Версия Chrome 80 содержит множество обсуждений. Был реализован ряд функций долгожданных, таких как модули ECMAScript в веб-воркерах, нулевое слияние, опциональная последовательность и другие. О выпуске, как обычно, было объявлено в блоге Chromium. Отрывок из публикации в блоге изображен на скриншоте ниже.
Публикация в блоге Chromium с красными рамками вокруг элементов с атрибутом id .
Вы, вероятно, задаетесь вопросом, что это за красные кровяные тельца. Они являются результатом возникновения фрагмента в DevTools. Он отличается всеми элементами, у которых есть атрибут id .
Отображение id элемента в Dev Tools.
Впрочем, чтобы найти элемент id, мне пришлось открыть инструменты разработчика. Это многое говорит о том, с какой вероятностью автор публикации собирался ссылка на эту страницу раздела.
А что, если мне нужно опубликовать посилання на что-то, не имеющее id ? Скажем, я хочу сделать ссылку на заголовок Модули ECMAScript в Web Workers. Как видно на скриншоте ниже, у рассматриваемого элемента
Заголовок без идентификатора в Dev Tools.
Успех
По поиску безопасности функция требует, чтобы ссылки открывались в тайне noopener . Поэтому не следует применять параметр rel="noopener" для якорей и добавить noopener к списку функций окна Window.open() .
Допустим, хочу сделать ссылку на заголовок Модули ECMAScript в Web Workers в публикации в блоге, где открыты новые функции Chrome 80. URL-адрес в этом случае будет таким:
Текстовый фрагмент выделен вот так . Если вы нажмете на ссылку в браузере с поддержкой этой функции, например, Chrome, фрагмент текста будет выделен, а экран прокрутится до него:
Скриншот прокручен до выделенного фрагмента текста.
А что, если я хочу сделать ссылку на весь раздел Модули ECMAScript в Web Workers, а не только на его заголовок? Процентное кодирование всего текста раздела сделано по URL-адресу неприменимо долго.
К счастью, есть способ получше. Вместо того, чтобы передать весь текст, можно выделить его границы, используя синтаксис textStart,textEnd . Так что я обнаружил по несколько слов с процентным кодированием в начале и в конце нужного текста, разделив их запятой , , .
Это выглядит так:
Значением textStart будет ECMAScript%20Modules%20in%20Web%20Workers, затем идет запятая, , за которым следует ES%20Modules%20in%20Web%20Workers. —значение textEnd . Когда вы нажмете на такой посилан в избранном с уверенностью, например, Chrome, весь раздел будет выделен, а экран прокрутится до него:
Скриншот прокручен до выделенного фрагмента текста.
Снимок прокручен, но выделен фрагмент текста не тот, что нужен.
Используя достаточно длинные значения для textStart и textEnd , можно получить ссылки на ссылки. Однако в некоторых случаях это невозможно. Кстати, почему я выбрал в качестве примера публикацию в блоге о выпуске Chrome 80? Дело в том, что в этой версии были представлены текстовые фрагменты:
Отрывок из публикации в блоге с объявлением о текстовых фрагментах.
Внимание
Обратите внимание, что при подборе фрагментов текста регистр не посещается.
Полный синтаксис текстовых фрагментов показал ниже. (Квадратные скобки прихода на необязательный параметр.) Значения всех параметров должны быть закодированы в процентах. Особенно это касается символов дефиса-, амперсанда и и запятой, чтобы они не интерпретировались как часть синтаксиса текстовой директивы.
Однако в этом обзоре было обнаружено:
Три текстовых фрагмента по одному URL.
Ссылка с фрагментом элемента и текстовым фрагментом.
Есть элемент синтаксиса, который я еще не объяснил: директива фрагмента :~: . Чтобы избежать проблем с внедрением URL-адресов существующих фрагментов фрагментов, как показано, в поиске текстовых фрагментов выше вводится директива фрагмента. Директива фрагмента — это часть фрагмента URL-адреса, ограниченной кодовой последовательностью :~: . Она зарезервирована для выполнения инструкций пользовательского агента, таких как text= , и используется из URL-адреса во время загрузки, чтобы авторские скрипты не использовались в взаимодействии с ним. Инструкции пользовательского агента также подвержены директивам. Поэтому в случае использования text= называется текстовой директивой.
Чтобы определить, что такое алгоритм ли функция, проверьте доступное только для чтения свойство fragmentDirective на элементе document . Директива фрагмента — это механизм, обнаруженный URL-адресам предъявления инструкций, направленным браузеру, а не документу. Это предназначено для того, чтобы избежать непосредственного взаимодействия с авторскими скриптами, так что будущие инструкции пользовательского агента могут быть добавлены без опасений, что Существующий контент будет внесены в пакеты. Потенциальный пример таких ожидаемых дополнений — подсказки для перевода.
Обнаружение функций в основном для случая, когда генерируются фрагменты фрагментов (например, поисковые фрагменты), для исключения передачи ссылок на фрагменты текста, которые не встречаются.
По умолчанию задают стиль фрагментам текста так же, как и помечают (обычно это черный текст на желтом фоне, системные цвета CSS для пометки). Таблица стилей пользовательского агента содержит CSS, который выглядит следующим образом:
Как обнаружить псевдоселектор ::target-text , который можно использовать для выявления преступлений. Например, вы можете оформить свои текстовые фрагменты в виде черного текста на красном фоне. Как обычно, не проверяют концентрацию кислорода, чтобы переопределить стиль, не вызывающий проблем с доступностью, и проверить, что измерение действительно влияет на остального потребления.
Функция текстовых фрагментов может быть до некоторой степени полизаполнена. Мы наблюдаем полизаполнение, которое внутренне используется для расширения без встроенной поддержки текстовых фрагментов, где реализована реализация на JavaScript.
Полиза заполнения содержит файл fragment-generation-utils.js, который можно импортировать и использовать для создания ссылок на фрагменты текста. Это представление в понимании кода ниже:
Многие сайты используют фрагменты для маршрутизации, поэтому предполагаются текстовые фрагменты, чтобы не нарушать работу страницы. Определена ссылка на фрагменты текста для страницы, например, для поиска целей, но предлагаемое решение еще не реализовано. В качестве временного решения вы можете использовать извлеченный ниже код для извлечения необходимой информации.
Директивы текстовых фрагментов вызываются только при полных переходах (не в рамках страниц), которые являются активацией пользователя. Кроме того, для перехода из источника, отличного от назначения, естественно, чтобы переход был выполнен в Noopener, чтобы целевая страница была достаточно изолирована. Директивы фрагментов текста применяются только к основному фрейму. Это означает, что поиск текста внутри окон iframe не будет выполняться, а переход в iframe не вызовет фрагмент текста.
Важно, чтобы реализация обнаружения текстовых фрагментов не допускалась независимо от того, был ли текстовый фрагмент найден на странице или нет. В то время как фрагменты элементов полностью контролируются автором исходной страницы, текстовые фрагменты могут быть кем угодно. Помните, как в понимании выше не было возможности создать ссылку на заголовок Модули ECMAScript в Web Workers, поскольку у элемента
Для сайтов, где требуется применение этого функционала, Chromium поддерживает значение заголовка Document Policy, которое можно отправлять, чтобы агенты среды не обрабатывали URL-адреса с текстовыми фрагментами.
Еще один способ, посложнее — применить корпоративную ассоциацию ScrollToTextFragmentEnabled . Чтобы сделать это в macOS, вставьте в терминал приведенную ниже команду.
В Windows следуйте документации на сайте справки Google Chrome Enterprise.
Предупреждение
Пробуйте это, только если знаете, что реализуют.
Для некоторых источников поисковая система Google дает быстрый ответ или сводку с фрагментом контента с требуемым веб-сайтом.Эти избранные фрагменты чаще всего встречаются в космосе, когда поиск оказывается в форме запроса. Нажав на избранный фрагмент, пользователь взял прямо к его тексту на исходной веб-странице. Это работает благодаря автоматически созданным URL-адресам фрагментов текста.
URL-адреса с текстовыми фрагментами — это мощное средство для создания ссылок на публичный текст на веб-страницах. С его помощью научное сообщество может привести точные цитаты или ссылки на источники, поисковые системы, поисковые системы, поиск ссылок на текстовые результаты на страницах, а также социальные сети, предназначенные для пользователей, которые отправляют фрагменты веб-страниц вместо случайных скриншотов. Надеюсь, что вы перестали использовать URL-адреса с текстовыми фрагментами и, как и я, сочтете их описания. Обязательно установите расширение для ссылки на фрагмент текста.
Текстовые фрагменты были реализованы и защищены Ником Беррисом и Дэвидом Боканом при участии Гранта Вана. Отдельная благодарность Джо Медли за надежное рецензирование этой статьи. Баннер взят у Греги Ракози на Unsplash.
Хотите попробовать футуристическую гиперссылку вместо старомодной?
Мы часто используем гиперссылки на наших веб-страницах, чтобы добавить навигационную ссылку на другую веб-страницу. Гиперссылки можно легко отображать на веб-страницах с помощью хорошо известного родного HTML-тега привязки. Кроме того, тег привязки предлагает некоторые полезные встроенные функции, такие как возможность изменить целевое окно для данного URI. Например, мы можем легко установить новую вкладку в качестве целевого окна. Кроме того, мы можем использовать JavaScript для достижения той же цели. Если используется JavaScript, можно также создавать всплывающие окна для загрузки URI.
Рассмотрите следующие примеры для двух упомянутых выше сценариев.
Переход на внешнюю веб-страницу с помощью тега привязки HTML:
То же поведение при использовании JavaScript:
Допустим, есть веб-страница с большим объемом текста, и вам нужно добавить ссылку на нее на один из ваших веб-сайтов. Несомненно, вы можете просто добавить гиперссылку HTML. Но как вы можете ссылаться на определенную часть текста на веб-странице? Вам повезло, если конкретная страница поддерживает прямую навигацию по заголовкам, как в следующем примере:
Однако не каждая веб-страница имеет такую реализацию. Несмотря на то, что он существует, мы не можем направлять пользователей к определенному тексту в абзаце. Следовательно, необходима новая стандартная функция для выделения определенного текста веб-страницы с использованием URI. W3C определил это требование как допустимую функцию для всех браузеров и, как обычно, внедрит общую спецификацию.
Первичный URI станет примерно таким, если используется текстовый фрагмент:
Эти параметры разделяются запятой ( , ). По сути, параметры textStart и textEnd помогают искать конкретный текст, выполняя поиск по диапазону. Важно отметить, что, возможно, текст тоже может быть дублирован. Поэтому параметры -prefix и -suffix предоставляют информацию о контексте, помогая браузеру найти, где находится ожидаемый текст.
Рассмотрите следующие примеры:
Этот URI направит вас на веб-сайт, прокрутит и выделит первое вхождение Пример:
При этом будет выделено "Этот домен предназначен для использования", но не будут выделены фразы типа "Этот домен подходит", потому что критерии соответствия явно говорят, что окончание должно быть "использовать".
«Этот домен» в разделе «Вы можете использовать этот домен в литературе» будет выделен указанным выше URI. Но если слово «этот домен» уже встречалось ранее в таких предложениях, как «…связать этот домен на самом деле…», браузер не будет выделять эти части, потому что в них отсутствует данный контекст.
Кроме того, несколько текстовых фрагментов можно использовать для выделения более чем одной части веб-страницы. В следующем примере будут выделены два слова:
Возможно, вы уже заметили, что поиск Google использует эту функцию, чтобы выделить наиболее релевантный ответ в соответствии с ключевыми словами, которые вы ввели при переходе к первому результату поиска.
Спецификация текстовых фрагментов — это недавно добавленная функция. Последние браузеры на основе Chromium поддерживают его. Если вы используете версию Google Chrome выше 80, вы можете использовать функцию фрагментов текста.
Пока нет хорошей поддержки браузерами, и я думаю, что другие браузеры скоро реализуют спецификацию текстовых фрагментов, потому что это очень полезно для всех. В Google Chrome даже есть расширение, которое позволяет генерировать URI с текстовыми фрагментами простым щелчком правой кнопкой мыши.
Новый API для перехода к определенной части веб-страницы постепенно становится частью браузеров. Во многих случаях он может заменить якорные ссылки, которые использовались в веб-разработке на протяжении десятилетий.
Недавно я заметил новое поведение StackOverflow в своем браузере. Ответ, который я искал, был выделен, как если бы я использовал функцию поиска браузера. Однако этот выделенный текст был создан поиском Google, . или нет?
Эта функциональность называется Text Fragments, и ее спецификация была опубликована WICG 1 , что означает, что де-факто это всего лишь предложение, а не стандарт. Несмотря на это, кажется, сейчас не проблема внедрить такую функцию в браузер.
Я объясню эту новую функциональность, проверю поддержку браузера, а также приведу рабочий пример далее в этой статье.
Фрагменты текста
Фрагменты текста добавляют поддержку навигации и выделения указанного фрагмента текста на странице, что сразу же привлекает к нему внимание пользователя.
До сих пор нам приходилось использовать привязки, ссылки, указывающие на элементы с определенными атрибутами id. Вы можете попробовать перейти к разделу комментариев, чтобы увидеть его в действии.
- поисковые системы — они предоставляют ссылки на страницы, которые вы ищете. С помощью текстовых фрагментов они могут привести вас именно к искомому содержанию, а не к началу страницы.
- поделиться из браузера — допустим, вы хотите поделиться текстом с веб-страницы с другом. Вы выбираете эту часть текста и в контекстном меню браузера выбираете "Поделиться этим текстом" - и браузер помещает URL с правильным фрагментом текста в буфер обмена. Теперь ваш друг перешел в ту же часть страницы. (например, статья в Википедии).
Как браузер должен реагировать на текстовый фрагмент, намеренно не определено. В то время как мой браузер выделяет текст и прокручивает до этой части страницы, он также может активировать функцию поиска по этому тексту или отображать уведомление с сообщением «щелкните, чтобы прокрутить до текста».
Итак, как выглядит фрагмент текста?
В частности, он состоит из четырех частей:
Текст для выделения определяется textStart, который также является единственным обязательным параметром директивы фрагмента. Если он слишком длинный, его можно разделить на две более короткие части. Второй определяет конец фрагмента ( textEnd ). Браузер подсветит все, что находится между этими частями.
префикс и суффикс определяют контекст, поэтому браузер знает, какой текст выбрать, если он встречается более одного раза. Они представляют собой текст, непосредственно предшествующий ( префикс ) и следующий ( суффикс ) тексту, который должен быть выделен. Это означает, что контекст не является частью фрагмента текста.
Некоторые примечательные характеристики
Необходимо указывать целые слова, часть слова не работает.
Некоторые символы, а именно тире - , запятая и амперсанд & , должны быть декодированы в процентах, чтобы их не интерпретировали как часть синтаксиса текстовой директивы.
Фрагмент (якорь) можно использовать вместе с фрагментами текста. Может случиться так, что текст на странице изменился с момента создания текстового фрагмента, поэтому браузер все еще может указать хотя бы на соответствующий раздел страницы.
Выделение большего количества текстовых фрагментов возможно путем добавления дополнительных текстовых фрагментов к URL-адресу. Просто соедините их с помощью амперсанда(ов).
К сожалению, на момент написания этой статьи нельзя было настроить стиль выделенных фрагментов текста.
Готов ли ваш браузер?
Не так много. Но если у вас есть один из поддерживаемых браузеров, вы можете это сделать.
Посмотреть в действии
Выберите любой текст на этой странице и снова откройте ее, чтобы увидеть выделенный фрагмент текста.
Для простоты и цели этого примера диапазон выбора распространяется на все выбранные элементы.
Вы можете использовать те же функции на любой странице с этим новым расширением Chrome Link to Text Fragment.
Вопросы конфиденциальности
Как мы все знаем, не все бывает ярким и блестящим. Эта новая функция, которая уже развернута на сотнях тысяч устройств, может быть использована против пользователей без их ведома.
Мне указали на статью, в которой более подробно рассматривается этот вопрос. Я также рекомендую вам проверить эту ветку твита Пита Снайдера, которая должна дать вам лучшее представление. Я не мог бы объяснить это лучше.
Я хотел бы узнать больше об этой теме безопасности, поэтому, если вы знаете о каком-либо связанном с этим ресурсе, пожалуйста, свяжитесь со мной.
Читайте также: