Как выделить текст на сайте, который не выделяется, и скопировать его
Каждый пользователь интернета сталкивался с ситуацией, когда на сайте необходимо выделить часть текста, а сделать это не получается. Происходит так потому, что веб-мастер поставил защиту от копирования контента на своем интернет-ресурсе.
Но иногда скопировать что-то очень нужно, например, чтобы вставить в поисковую строку непонятную фразу, сохранить понравившуюся статью к себе на компьютер, сделать рерайт интересного материала или перевод. Ни одна из перечисленных причин не является противозаконной.
Настоящие интернет-мошенники умеют взламывать и не такие защиты, поэтому не совсем понятны причины установки некоторыми веб-мастерами подобных запретов.
Но факт остается фактом, такие интернет-ресурсы существуют, и будет полезно знать, как справляться с этой проблемой.
Как выделить и скопировать текст, защищённый от копирования
Первый способ, универсальный для всех интернет-браузеров — это выделение и копирование содержимого веб-страницы через исходный код HTML. Чтобы для выбранной страницы открылся режим разметки HTML, используйте сочетание «Ctrl +U».
Будет открыта вкладка с HTML-кодом. Теперь среди HTML-тегов надо найти то, что вы решили сохранить. Поможет поиск. Для этого используйте клавиши «Ctrl+F» или F3. Сверху появится окошко для поиска.
Когда нужные фразы будут найдены, сделайте выделение, удерживая левую кнопку мыши, и скопируйте в любой текстовый редактор, используя правую кнопку мыши «копировать» и «вставить» или «быстрые кнопки»: «Ctrl+C» и «Ctrl+V».
Неудобство этого метода состоит в том, что вместе с текстовым содержимым выделяется и копируется также и HTML-код. Скопированный файл потом придётся «чистить» от ненужных символов.
Во втором способе рассмотрим, механику простого выделения, с помощью встроенных функций интернет-браузеров.
Google Chrome и Opera. В этих браузерах надо воспользоваться функцией «Печать». Для этого нажмите на клавиатуре «Ctrl+P» или откройте «Печать» через меню управления. В Google Chrome панель управления открывается, если нажать на три точки в правом верхнем углу браузера.
В Opera «Печать» находится на вкладке «Меню» в верхнем левом углу. На этой вкладке можно задавать параметры печати с предпросмотром выбранной интернет-страницы.
Для наших целей интересно окно предпросмотра, теперь нужная часть текста там может быть выделена и скопирована. Нажимая на «+» или «-» можно настроить желаемый размер шрифта. Для возврата к обычному виду веб-страницы нажмите «Отмена».
Internet Explorer и Mozilla Firefox. В этих браузерах существует функция «Режим чтения». Значок для перехода в «Режим чтения» находится в адресной строке справа.
Когда страница будет открыта для чтения, будет возможность выделять и копировать требуемые фрагменты. Но этот вариант просмотра доступен не для всех интернет-страниц, а только для статических со статьями.
Третий способ очень простой. Это использование «виртуального принтера». Скопируйте адрес страницы, откройте онлайн-принтер printfriendly точка com/ и пропишите адрес в специальной строке.
Нажмите «Print preview». Откроется страница предварительного просмотра. Здесь уже возможно выделять текстовые фрагменты и, если требуется, копировать на свой компьютер.
Давайте немного подытожим, мы можем выделять текст, при помощи:
- Через исходный код.
- Встроенные функции вашего браузера.
- Через виртуальный принтер.
Мы рассказали вам о самых простых методах, выделения текста, который невозможно выделить. Теперь, когда вы столкнётесь с проблемой, что на каком-нибудь интернет-ресурсе текст не выделяется и не копируется привычными приёмами, вы уже будете знать, что делать и не будете плохо думать о владельце этого ресурса.
Как выделить текст на сайте, который не выделяется, и скопировать его : 8 комментариев
Ставят защиту от копирования, может, для начинающих воришек контента. Асы, понятно, что все умеют. А таких вот любителей нажиться на чужом оттолкнет. Хотя можно это очень легко узнать по запросу. Может, и Вашу статью выдадут им. :).
Мне больше понравилось через браузер. Спасибо.
Большая тебе благодарность, человечище.
Спасибо. Кратко, по делу, без «воды»! Всё работает!
Спасибо большое , статья замечательная. Даже у полного чайника все получилось с первого раза и первым и третьим способами, второй не пробовала, т к установлен другой браузер. )))
Выделение и CSS
Навык выделения текста и других объектов сформировался у пользователей компьютеров много лет назад. Мы выделяем содержимое веб-страниц по разным причинам. Возможно, нужно скопировать текст и где-то его процитировать, возможно — кому-то просто легче читать текст, выделяя его фрагменты. На мобильных устройствах, правда, выделять что-либо сложнее. Меня, например, это раздражает. Мне не нравится выделять содержимое веб-страниц на телефоне. Эта операция кажется какой-то «неправильной».
В этом материале я расскажу обо всём, что нужно знать о стилизации выделений средствами CSS. В частности, речь пойдёт о псевдоэлементе ::selection и о свойстве user-select . Эта статья направлена на то, чтобы показать всем желающим возможности CSS по работе с выделениями, и на то, чтобы рассказать о том, когда и как использовать разные методы работы с выделениями.
Основы
На MDN можно узнать о том, что псевдоэлемент ::selection позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).
Для использования ::selection достаточно воспользоваться следующей конструкцией:
Выделенный текст
Вот пример, с которым можно поэкспериментировать.
Свойства, поддерживаемые ::selection
Стоить отметить, что псевдоэлемент ::selection поддерживает только свойства color , background и text-shadow .
Настройка собственных эффектов выделения
Что если нам нужно, чтобы выделение выглядело бы по-особенному? Например, чтобы выделение имело бы определённую высоту или некий интересный фон? Взгляните на следующий рисунок.
Пример особой настройки выделения
Это возможно, хотя и потребует приложения некоторых усилий. Вот как сделано выделение, показанное выше:
- Добавлен псевдоэлемент, с тем же текстом, который мы выделяем. Затем псевдоэлементу задано свойство height: 50% и белый фоновый цвет.
- Псевдоэлемент расположен над исходным текстом.
Об этой методике я узнал здесь.
Ещё один вариант подобного выделения представлен ниже. Здесь я, вместо сплошного выделения, реализовал выделение в виде CSS-градиента. Смысл тут заключается в использовании белого градиента с высотой в 50% и в однократном заполнении элемента фоновым рисунком благодаря использованию значения no-repeat при настройке свойства background .
На следующем рисунке показано разъяснение этой методики.
Реализация градиентного выделения
Надеюсь, я смог понятно объяснить эту идею. Вот рабочий пример.
Анимирование выделения
Работая над предыдущим примером, я задался следующим вопросом: «Реально ли анимировать выделение?». Например, в процессе выделения текста высота выделения составляет 50%. А когда указатель мыши уводят в сторону, высота выделения увеличивается до 80%. Как это сделать? А вот так:
Текст в процессе выделения
Текст после завершения выделения
Вот видео, в котором демонстрируется анимированное выделение.
Многострочный текст
Представленная выше методика настройки выделения, к сожалению, не подходит для многострочного текста. Для того чтобы, всё же, реализовать нечто подобное и для такого текста, нужно прибегнуть к возможностям JavaScript и поместить каждое слово во встроенный (строчный) элемент, например — в <span> . После того, как каждое слово окажется в собственном элементе <span> , к каждому из таких элементов надо добавить псевдоэлемент. А уже после этого к многострочному тексту можно применить вышеописанный эффект.
Вот скрипт, позволяющий поместить каждое слово в <span> -контейнер:
После этого элементы <span> надо стилизовать. Затем к каждому из них надо добавить псевдоэлемент:
Если посмотреть на эту конструкцию в деле, то окажется, что она работает, но не совсем так, как можно ожидать. Ниже показан пример выделения многострочного текста. Можно заметить, что выделение выглядит неоднородным.
Неоднородное выделение
Я бы сказал, что подобное многострочное выделение получается не очень хорошим, и что его не стоит использовать в глобальном масштабе. Возможно, его стоит применять лишь, скажем, для организации выделения какого-то отдельного абзаца.
Тут с таким выделением можно поэкспериментировать.
Креативный подход к использованию ::selection и text-shadow
Так как одним из свойств, которые поддерживает псевдоэлемент ::selection , является text-shadow , мы можем попытаться достичь каких-нибудь интересных эффектов, используя несколько теней текста. Исследуем возможности, которые открывает перед нами эта идея.
▍Выделение с длинными тенями
Выделенный текст отбрасывает длинные тени
Вот как реализовать этот эффект:
▍Эффект контурного текста
Выделенный текст становится контурным
Эту идею я нашёл в данной статье. Речь идёт о том, что с помощью свойства text-shadow можно сымитировать эффект контурного текста.
▍Эффект размытия
Выделенный текст выглядит размытым
Ещё один интересный эффект, который можно применить к выделенному тексту, заключается в размытии этого текста. Суть тут в том, чтобы использовать при настройке цвета текста свойство color: transparent . Тени, задаваемые с помощью text-shadow , при этом никуда не исчезнут, что и даст нужный эффект.
Уверен, что вы сами сможете придумать ещё очень много примеров применения text-shadow для стилизации выделений. Это свойство даёт нам безграничные возможности.
▍Тени текстов и производительность
Не рекомендуется использовать слишком сложные стили при настройке text-shadow . Дело в том, что чрезмерное увлечение этим свойством приводит к проблемам с производительностью. Вот видео, демонстрирующее один из примеров таких проблем.
Использование очень сложных стилей при настройке выделения текста
Представленный здесь неоновый эффект очень сложен. Обратите внимание на то, что при выделении этого текста заметна задержка между моментом выделения текста и моментом применения стилизации. Кроме того, обратите внимание на то, что сверху и слева появляется то, что появляться не должно. Поэтому прошу вас использовать text-shadow осмотрительно.
Выделяются ли элементы форм?
Краткий ответ на вопрос, вынесенный в заголовок этого раздела, будет звучать как «да». Мне кажется, что это неправильно: выделяешь страницу, а оказывается, что содержимое внутри полей ввода тоже выделяется. Вот как это выглядит.
Содержимое внутри полей ввода выделяется
Тут может быть выделен и текст внутри кнопки. В разделе, посвящённом user-select , мы поговорим о том, стоит или нет позволять пользователям выделять формы элементов.
Исследование свойства user-select
Свойство user-select даёт нам возможность задавать возможность выделения конкретного текста пользователем. Это свойство может оказаться полезным для отключения возможности выделения текста, что может пригодиться для ограничения возможностей пользователя по выделению материалов, расположенных рядом друг с другом. Вот стандарт, описывающий user-select .
Это свойство может принимать следующие значения: none, auto, text, contain, all .
Сценарии использования user-select
▍Текст и иконка
Если в элементе есть текст и иконка — в виде символа или значка, взятого из какого-нибудь шрифта, то при выделении текста будет выделяться и эта иконка. Рассмотрим пример, представленный на следующем рисунке.
Кнопка с текстом и иконкой
Вот код этой кнопки:
При выделении этого элемента он выглядит так, как показано ниже.
Выделенная кнопка
В подобном совершенно нет необходимости. Обратите внимание на то, что в разметке используется атрибут aria-hidden , скрывающий иконку от средств чтения с экрана. Для того чтобы решить проблему с выделение того, что выделять не нужно, мы можем воспользоваться следующим стилем:
Это позволяет запретить выделение иконки. И, в то же время, мы привязываем запрет выделения к атрибуту aria-hidden . В результате всё, что не должно выделяться, скорее всего, не должно быть видимым и для средств чтения с экрана.
▍Флажки
Меня раздражает такое поведение флажков, когда, устанавливая или снимая флажок, я случайно выделяю текст его описания. Вот как это выглядит.
Текст описания флажка выделен случайно
Решить эту проблему можно, стилизовав элемент <label> следующим образом:
▍Выделение всего текста
Значение all , которое может принимать свойство user-select , позволяет добиваться интересного эффекта. Если это свойство с таким значением есть у родительского элемента, то весь текст, содержащийся в таком элементе, можно выделить одним щелчком мыши. Это может оказаться полезным для работы с текстовым содержимым, которое должно выделяться целиком. Например — для выделения фрагментов кода, имеющихся на странице:
Фрагмент текста, оформленный таким стилем, можно выделить одним щелчком мыши по нему.
Веб-приложения
Веб-приложение должно восприниматься пользователем как настоящее приложение. Можно ли выделять текст кнопок в обычных приложениях? Нет, нельзя. Важно, чтобы веб-приложения отражали привычные черты обычных приложений, делая это даже с учётом того, что они созданы с использованием HTML и CSS.
Рассмотрим несколько примеров из жизни.
▍Slack
В Slack можно выделять метки и поля ввода. Однако тексты кнопок не выделяются.
Подписи кнопок не выделяются
Вот ещё один пример.
Подпись в заголовке модального окна выделяется
А дату чата выделить нельзя.
Дату выделить нельзя
В целом — мне кажется странным то, что в приложении можно выделять некоторые тексты, которые, вроде бы, не должны поддерживать выделение. В интерфейсе Slack есть места, где используется user-select: none , но таких мест меньше, чем можно ожидать. Например мне, как пользователю, нет никакой выгоды от выделения заголовка модального окна.
▍Notion
Подход к выделению элементов, реализованный в Notion, мне нравится больше. Это веб-приложение больше похоже на реальное приложение, а не на веб-сайт, любую часть интерфейса которого можно выделить.
То, что не должно выделяться, не выделяется
Ни один фрагмент текста с этого рисунка не выделяется. Это — именно то, чего можно ожидать от приложения.
Не используйте глобальное отключение выделения
Не рекомендуется отключать выделение глобально. Когда вы пользуетесь отключением выделения — постарайтесь, чтобы оно отключалось бы лишь у элементов, для которых оно не имеет смысла. Для этого можно создать вспомогательный класс. Например — такой:
Нехороший паттерн
Есть один UX-паттерн, который мне крайне не нравится. Он заключается в показе предупреждения при попытке выделения текста. Это раздражает и создаёт у пользователя такое ощущение, будто его взаимодействием с сайтом пытаются управлять. Пример этого паттерна показан ниже.
Запрет выделения с показом уведомления
Пожалуйста, не делайте так.
Выделение на мобильных устройствах
Существует свойство -webkit-touch-callout для iOS Safari, которое должно отключать показ стандартной подсказки, выводимой при выделении текста. Я попытался воспользоваться этим свойством, но оно не работает.
Стили ::selection тоже не работают.
А свойство user-select: none работает так, как ожидается.
Я постарался найти реальный пример, иллюстрирующий эту проблему. Я скопировал фрагмент текста из Википедии. При этом был скопирован и совершенно ненужный мне текст (listen) . Это раздражает.
Вместе с полезным текстом скопировано и (listen)
Вместо того чтобы позволять пользователю копировать это вот «listen», лучше было бы добавить к этому элементу стиль user-select: none . В результате при копировании текста, содержащего этот элемент, он копироваться не будет.
Итоги
Здесь мы рассмотрели методы настройки выделения элементов веб-страниц с использованием средств CSS. Возможно, вам интересно будет взглянуть и на этот материал.
Уважаемые читатели! Как вы настраиваете выделение текстов в своих проектах?
HTML выделение: Выделение текста жирным, курсивом и цветом.
После очередного долгого перерыва вспомнил, что давно уже не писал ни строчки. Конечно, на это есть свои причины, ведь какая-нибудь причина придумать себе оправдание всегда найдется, правда? На самом деле, каждый день занимаюсь ВидеоКурсом, о котором уже упоминал пару раз, но пока больше об этом ничего говорить не буду, скоро все узнаете.
Так вот, так как в голову ничего не приходило, о чем можно написать. Решил посмотреть статистику, что же интересует пользователей Рунета по вопросам HTML, WordPress, DLE и тому подобных тем. И знаете что? Есть еще о чем писать. На все вопросы, что я нашел, вроде бы и есть ответы, однако не всегда в понятной форме. Да и вообще стало интересно написать что-нибудь этакое.
Сегодня поговорим об HTML. А именно о том, как выделить текст жирным и курсивным начертанием, а также поговорим о выделении цветом.
Выделение текста жирным начертанием.
Чтобы выделить текст жирным начертанием не нужно ничего мудрить со стилями CSS или придумывать еще какие-либо сложности. В HTML уже есть такая возможность. При этом, мы можем не просто выделить текст жирным, но и сделать на нем некий акцент с помощью выделения. Акцент может делаться для поисковых систем или каких-либо специальных браузеров или программ. Главное это не переборщить с акцентированием текста в статье или на странице с как-то информацией, так как это может губительно сказаться как минимум на продвижении данной HTML-страницы.
Итак, чтобы просто выделить текст жирным, мы можем воспользоваться тегом <b> . Данный тег относится к элементам физической разметки, при этом устанавливая жирное начертание текста, не делая на нем какого-либо акцента. Этот тег является парным, что говорит о том, что он имеет, как открывающий тег, так и закрывающий. Кроме того, так как элемент встроенный, он должен находиться в каком-либо блочном элементе, например <p>
Пример кода:
жирный текст
В этом случае мы просто выделили текст жирным начертанием и все.
Но бывает, так что нам нужно не просто выделить текст, а сделать на нем акцент. Для этого мы можем использовать тег логической разметки <strong> . Мало того, что текст, выделенный, этим тегом имеет больший вес для поисковых систем. Но и по идее он должен отличаться от тега <b> в речевых браузерах, например интонацией. Однако не могу ни подтвердить, ни опровергнуть данную информацию, так ли это?
В этом случае все абсолютно также как и в случае, с простым выделением жирным, только мы делаем акцент, а не просто выделение.
Пример кода:
текст, на котором мы сделали акцент
Все довольно просто, не правда ли?
Выделение текста курсивом.
В этом случае все не сложнее, чем в первом. И ситуация у нас абсолютно та же. Мы можем выделить текст двумя вариантами в HTML. Опять же, используя либо тег физической разметки или же тег логической, с помощью которого мы опять же делаем акцент на выделенный текст.
Чтобы выделить текст курсивом мы воспользуемся тегом <i> . Этот элемент является парным и строчным, что говорит нам о том, что мы должны использовать, как открывающий тег так и закрывающий. А также должны использовать его внутри блочного элемента. И в данном случае наиболее подходящий блочный элемент — тег параграфа <p> .
Пример кода:
текст курсивом
И конечно же мы можем сделать акцент на тексте одновременно выделив его курсивом с помощью тега <em> . Данный элемент такой же как <strong> , за исключением того что выделяется текст курсивом а не жирным.
Пример кода:
текст, на котором мы сделали акцент
И последнее о чем я хотел бы сегодня поговорить — это выделение текста цветом.
HTML выделение цветом.
К сожалению тега, для выделения текста цветом в HTML мы не имеем. Но все же и в этом способе нет ничего сложного.
Итак, чтобы выделить определенную часть текста цветом, мы можем обернуть нужную часть текста тегом <span> , который является универсальным тегом, и используется внутри блочного элемента. В нашем случае блочным элементом является тег <p> . Но добавить <span> недостаточно. Также необходимо указать параметр style , что позволит добавить CSS свойства необходимому тексту, указать само свойство ( color ), которое поможет задать определенный цвет. И наконец, указать значение для свойства color . Но может возникнуть вопрос: «Что указывать-то?» Указать необходимо HTML-код того цвета в который мы хотим «покрасить» текст. HTML-коды цветов можно найти здесь.
Теперь чтобы было понятней рассмотрим пример.
Пример кода.
В этом случае мы выделяем одно слово: цветом. Также хочу отметить, что тег <span> является парным, и мы должны его закрыть там, где свойство должно закончиться.
текст, который нужно выделить цветом
Такими нехитрыми способами мы можем манипулировать текстом на нашей странице. Хочу также отметить, что все то, о чем мы только что говорили, работает и на WordPress и на DLE, ибо любой движок для вывода страниц использует HTML. Именно поэтому HTML можно назвать основой основ любого сайта, не важно, какая у Вас CMS.
Как выделить и скопировать текст на сайтах, которые это блокируют
Всегда — сейчас и раньше — бродя по просторам Интернета я натыкался на сайты, которые не позволяют скопировать часть текста или весь отображаемый текст в буфер обмена, или даже не дают выделить его с помощью мышки или клавиатуры.
Я недавно заметил это на сайте банка, который, к примеру, не давал мне скопировать номер банковского счёта в буфер обмена.
Эта инструкция собрала методы для обхода ограничений, заложенных в веб-сайты. Но, во-первых, почему в сайты закладывают в первую очередь эти ограничения?
Обычно причины, по которым компании и индивидуальные лица включают ограничение функциональности на их веб собственности, это, как правило, защита от копирования.
Метод 1: отключение JavaScript
Большинство веб-сайтов используют JavaScript для блокировки функций мышки. Если вы временно или даже постоянно выключите JavaScript на этом сайте, вы сможете копировать отображённый на них текст используя мышку.
Некоторые веб-сайты полагаются на JavaScript с других сторон, что означает, что вы можете столкнуться с проблемами, вызванными этим. Некоторые могут даже отказаться совсем показывать содержимое, когда JavaScript отключена.
Пользователи Firefox могут нажать F12, кликнуть на иконки настроек (шестерёнка) и отключить JavaScript в открывшемся меню.
Пользователи Chrome могут отключить JavaScript в настройках контента: chrome://settings/content
Пользователи Internet Explorer могут отключить JavaScript в Свойствах браузера > Безопасность > Зоны > Другой > Активные сценарии
Пользователи Opera могут отключить JavaScript на веб-сайтах в настройках Оперы: opera://settings/
могут быть полезными в этом отношении, поскольку они также могут блокировать выполнение сценариев.
Метод 2: Исходник
Другой способ, который у вас есть, это отобразить исходный код веб-сайта, на котором вы находитесь. Т.к. он отображается как редактор простого текста, возможно скопировать что угодно без каких либо ограничений.
Просто нажмите Ctrl-U, когда вы находитесь на сайте, для отображения исходного кода. Это работает в большинстве браузеров, включая Firefox, Chrome и Internet Explorer.
Но вам придётся самим найти необходимый текст или контент, который вам нужен, в этом исходнике. Используйте Ctrl-f для быстрого перехода к нему.
Там вы сможете также найти ссылки на изображения и другой контент, которые вы не могли сохранить или скопировать.
Метод 3: Расширения и скрипты
Третий и последний вариант — наиболее подходящий если вы регулярно сталкиваетесь с сайтами, которые запрещают правый клик или копирование текста, когда вы на них, и если вышеперечисленные методы не работают или не подходят.
RightToClick for Firefox отключает раздражительные проявления JavaScript, такие как запрет правого клика или выделение текста на сайтах.
предлагает похожие функции.
Вы найдёте целую кучу расширений для этих двух браузеров, которые удалят раздражающие вещи с веб-сайтов.
П.с. если нужно быстро скопировать что-то с сайта, а устанавливать расширения не хочется. Самый простой способ — сохраните страницу на жёсткий диск. У вас появится сама страница с расширением .html и каталог с таким же названием, как и страница. Переименуйте этот каталог (не важно, какое будет новое имя — главное, чтобы оно было отличным от первоначального) и запустите файл .html — теперь вы можете выделять и копировать текст без всяких ограничений (в редких случаях этот способ не работает).