Может ли кто-нибудь помочь мне с функцией javascript, которая может выделять текст на веб-странице. И требование - выделять только один раз, а не выделять все вхождения текста, как мы это делаем в случае поиска.
javascript
highlighting
Анкит
источник
источник
Ответы:
Вы можете использовать эффект выделения jquery .
Но если вас интересует необработанный код javascript, взгляните на то, что у меня есть. Просто скопируйте вставку в HTML, откройте файл и нажмите «выделить» - это должно выделить слово «лиса». С точки зрения производительности, я думаю, это подойдет для небольшого текста и одного повторения (как вы указали)
Редактирует:
С помощью
replace
Я вижу, что этот ответ приобрел некоторую популярность, я подумал, что могу добавить его. Вы также можете легко заменить
"the fox jumped over the fence".replace(/fox/,"<span>fox</span>");
Или для нескольких случаев (не относящихся к вопросу, но было задано в комментариях) вы просто добавляете
global
регулярное выражение замены."the fox jumped over the other fox".replace(/fox/g,"<span>fox</span>");
Надеюсь, это поможет заинтригованным комментаторам.
Замена HTML на всю веб-страницу
чтобы заменить HTML для всей веб-страницы, вы должны обратиться к
innerHTML
телу документа.document.body.innerHTML
источник
"<span class='highlight'>"
с"<span style='color: " + color + ";'>"
, цвет должен быть что - то вродеvar color = "#ff0000";
<img src="fox.jpg" />
Вы получите недопустимый HTML-<img src="<span class='highlight'>fox</span>.jpg" />
Предлагаемые здесь решения довольно плохие.
&
для &,<
для <,>
для>,ä
для ä,ö
для öü
для üß
для ß и т. Д.Что тебе необходимо сделать:
Прокрутите HTML-документ, найдите все текстовые узлы, получите
textContent
, получите позицию выделенного текста с помощьюindexOf
(с необязательным,toLowerCase
если он должен быть нечувствительным к регистру), добавить все передindexof
какtextNode
, добавить согласованный текст с выделенным диапазоном, и повторите для остальной части текстового узла (строка выделения может встречаться вtextContent
строке несколько раз ).Вот код для этого:
Тогда вы можете использовать это так:
Вот пример HTML-документа
Кстати, если вы выполняете поиск в базе данных с помощью
LIKE
,например,
WHERE textField LIKE CONCAT('%', @query, '%')
[чего не следует делать, вы должны использовать полнотекстовый поиск или Lucene], тогда вы можете экранировать каждый символ с помощью \ и добавить SQL-escape-оператор, таким образом вы найдете специальные символы, которые являются LIKE-выражениями.например
и значение @query не
'%completed%'
но'%\c\o\m\p\l\e\t\e\d%'
(протестировано, работает с SQL-Server и PostgreSQL, а также с любой другой системой СУБД, поддерживающей ESCAPE)
Пересмотренная машинописная версия:
Использование:
источник
ä
например, будет преобразован в фактический символ, даже при использованииinnerHTML
.Почему использовать самодельную функцию выделения - плохая идея
Причина, по которой, вероятно, плохая идея начинать создавать свою собственную функцию выделения с нуля, заключается в том, что вы наверняка столкнетесь с проблемами, которые другие уже решили. Проблемы:
innerHTML
)Звучит сложно? Если вам нужны некоторые функции, такие как игнорирование некоторых элементов выделения, отображение диакритических знаков, сопоставление синонимов, поиск внутри iframe, поиск по отдельным словам и т. Д., Это становится все более и более сложным.
Использовать существующий плагин
При использовании существующего, хорошо реализованного плагина вам не нужно беспокоиться о вышеупомянутых вещах. В статье 10 подключаемых модулей выделения текста jQuery на Sitepoint сравниваются популярные подключаемые модули выделения текста .
Взгляните на mark.js
mark.js - это такой плагин, который написан на чистом JavaScript, но также доступен как плагин jQuery. Он был разработан, чтобы предложить больше возможностей, чем другие плагины, с опциями для:
ДЕМО
В качестве альтернативы вы можете увидеть эту скрипку .
Пример использования :
Это бесплатно и с открытым исходным кодом на GitHub ( ссылка на проект ).
источник
acrossElements
опцию. И к третьему комментарию; mark.js невелик по сравнению с предлагаемыми функциями. И нет, маловероятно, что что-то сломается в будущем, поскольку mark.js был протестирован, например, при запуске Chrome 30 и во всех более новых версиях с кроссбраузерными модульными тестами, и никогда не было проблем с последующими версиями.источник
span.style.backgroundColor = "yellow";
переводится в CSS -style="background-color: yellow;"
эта тонкая разница между camelCase и пунктирной нотацией сначала сбила меня с толку.Вот мое решение на чистом JavaScript с регулярным выражением:
источник
one|two|three
>
символ. Измените регулярное выражение using,(?!([^<]+)?<)
чтобы оно работало.У меня такая же проблема, куча текста приходит через запрос xmlhttp. Этот текст имеет формат html. Мне нужно выделить каждое событие.
Проблема в том, что мне не нужно выделять текст в тегах. Например, мне нужно выделить лису:
Теперь я могу заменить его:
Чтобы ответить на ваш вопрос: вы можете не указывать g в параметрах регулярного выражения, и только первое вхождение будет заменено, но оно все еще находится в свойстве img src и уничтожает тег изображения:
Я решил это так, но мне было интересно, есть ли способ лучше, что-то, что я пропустил в регулярных выражениях:
источник
<img src="word">
или<a href="word">
.Ни одно из других решений действительно не соответствовало моим потребностям, и хотя решение Стефана Штайгера работало так, как я ожидал, я нашел его слишком многословным.
Вот моя попытка:
Я бы также рекомендовал использовать что-то вроде escape-string-regexp, если ваши ключевые слова могут содержать специальные символы, которые нужно будет экранировать в регулярных выражениях:
источник
Простой пример TypeScript
ПРИМЕЧАНИЕ. Хотя я во многом согласен с @Stefan, мне нужно было только выделить простые совпадения:
А затем построим фактический результат:
источник
Начиная с HTML5, вы можете использовать
<mark></mark>
теги для выделения текста. Вы можете использовать javascript для переноса текста или ключевого слова между этими тегами. Вот небольшой пример того, как отмечать и снимать отметки с текста.JSFIDDLE ДЕМО
источник
innerHTML
опасный. Он удалит события.Перенесемся в 2019 год: в веб-API теперь есть встроенная поддержка выделения текста:
И вам хорошо!
anchorNode
- начальный узел выбора,focusNode
- конечный узел выбора. И, если они являются текстовыми узлами,offset
это индекс начального и конечного символа в соответствующих узлах. Вот документацияУ них даже есть живая демонстрация
источник
Мне тоже было интересно, вы могли бы попробовать то, что я узнал в этом посте.
Я использовал:
вы также можете попробовать это здесь: http://henriquedonati.com/projects/Extension/extension.html
xc
источник
Если вы также хотите, чтобы он выделялся при загрузке страницы, есть новый способ.
просто добавь
#:~:text=Highlight%20These
попробуйте получить доступ к этой ссылке
/programming/38588721#:~:text=Highlight%20a%20text
источник
Использование метода SurroundContents () для типа Range . Его единственный аргумент - это элемент, который будет обертывать этот диапазон.
источник