WedX - журнал о программировании и компьютерных науках

Подсветка javascript для текста внутри html

Некоторое время я пытался написать функцию js, которая будет выделять (жирным шрифтом) каждое появление искомого текста в строке, содержащей теги html.

Пример: представьте, что строка

<b>test string</b> -- Bette <b>Higgins</b>

Если я ищу символ «b», результат должен быть

<b>test string</b> -- <b>B</b>ette <b>Higgins</b>

(как вы можете видеть, каждое вхождение B должно быть окружено полужирным тегом html.

Я безуспешно пытался использовать различные выражения регулярных выражений.

Любая идея?

Спасибо

javascript regex
17.05.2018

  • Вы искали об этом? Я уверен, что есть много вопросов по этому вопросу. 17.05.2018
  • если в целом, как показывает известный ответ на SO (stackoverflow.com/a/1732454/521598), вы действительно не может быть надежного способа анализа HTML с помощью регулярных выражений, возможно, для вашего случая вы можете попытаться адаптировать к JS этот stackoverflow.com/ q/7891771/521598 17.05.2018
  • да, я много искал в SO, но с каждым решением мой первый ‹b› (открывающий тег, содержащий текст) также выделяется. Просто чтобы прояснить, я не ищу решение регулярного выражения, любое решение будет оценено 17.05.2018

Ответы:


1

Вы можете реконструировать строку внутри элемента и при каждом появлении «SearchTerm» окружать тегом.

var str = "Hi, how's it going?"
var result = "";
var searchTerm = "it";
for (var i = 0; i <= str.length - searchTerm.length; i++) {
  if(str.substring(i, i + searchTerm.length) == searchTerm){
    result += "<b>" + str.substring(i, i + searchTerm.length) + "</b>";
    i += searchTerm.length - 1;
  } else {
    result += str.charAt(i)
  }
}
console.log(result);

Надеюсь это поможет.

17.05.2018
  • Привет, спасибо за ваш ответ, но это заменит каждое вхождение (даже на вкладках html, атрибуте стиля и т. д.) искомого текста, верно? Я не должен заменять вхождения в тегах html. 17.05.2018
  • Это зависит от того, какую строку вы передаете ей. Вам это нужно, чтобы обходить содержимое внутри HTML-тегов? 17.05.2018
    • Новые материалы
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Для любых предложений по сайту: [email protected]