Как найти текст игнорируя теги?

Question

[Хазрат Гаджикеримов]

Есть строка:

const faq = "<p><ul>\n<li>•  Download the App from <a href=\"https://itunes.apple.com/US/app?mt=8%29\" target=\"_blank\">AppStore</a> or <a href=\"https://play.google.com/store/apps/details?id=\" target=\"_blank\">Google Store</a></li>\n                        <li>•  Issue a virtual card within the app</li></ul>.</p>"

Мне нужно найти и заменить например все "app", игнорируя теги включая их атрибуты, но не текст внутри тегов, текущий вариант:

new RegExp(`(?!<a[^>]*?>)(${searchText})(?![^<]*?</a>)`, 'gi')

Ищет, но игнорирует текст внутри ссылок

Comments

[dodo512]

regex = new RegExp('((?:<[^>]*>|[^<>])*?)(app|$)', 'gi');
subst = 'lol';
out   = faq.replace(regex, (m0, m1) => (m1 == m0) ? m0 : m1 + subst);
console.log(out);

[Brother79Mail]

Вообще так <a[^>]*?> писать не рнкомендую, лучше <a[^<>]*?> мало ли где может быть 2 раза открытый тэг. Я в таких случаях всегда страхуюсь, хотя конкретно в этом случае допускаю, что может быть не критично, а игнорирует, потомучто у вас внутри ссылки найдет только если текст сразу за тэгом идет.

Answer 1

[Алексей Уколов]

Раз у вас javascript, сам бог велел использовать рекурсивный обход DOM, чтобы решить эту задачу нормально. Тогда не нужно будет вообще думать о тегах и их атрибутах. Регулярные выражения нужно использовать там, где текст имеет чёткую заранее известную структуру, это не про произвольный html.

Код очень простой и понятный: https://jsfiddle.net/alexey_m_ukolov/nfah953z/7/

Comments

[Хазрат Гаджикеримов]

Вариант с обходом DOM мне не подходит и это не по флоу реакта

[Хазрат Гаджикеримов]

у меня есть массив с данными, где нужно заменить, зачем мне обращаться к DOM? если можно просто заменить в массиве и отрендерить

[Алексей Уколов]

если можно просто заменить в массиве

В том-то и дело, что не просто, в чём вы уже убедились. Иначе бы и вопроса этого не было.

у меня есть массив с данными, где нужно заменить, зачем мне обращаться к DOM?

Затем, что это самый подходящий инструмент для вашей задачи. Речь, разумеется, не про то, чтобы отрендерить данные на странице, а потом их получить обратно - постройте параллельный DOM в памяти и никакой React вам не помешает.

[Хазрат Гаджикеримов]

Алексей Уколов, не согласен, я сортирую массив, мне бы корректно составить regex шаблон, который бы просто пропускал html теги, но не пропускал текст внутри них

[Алексей Уколов]

Ещё раз - нельзя "просто", "регулярные выражения" и "html" использовать в одном приложении. Регулярные выражения - для регулярного текста, html не регулярный текст. У вас есть идеальный инструмент для решения вашей задачи, но вы почему-то отказываетесь им пользоваться "потому что React". Это карго-культ какой-то, в Реакте совершенно не про это...

[Хазрат Гаджикеримов]

Ты не вникаешь в суть задачи и даешь мне рекомендации, пожалуйста, оставь свое мнение при себе.
У меня HTML куски в json файле, который я перебираю и произвожу рендер по ключевому слову, твой вариант имеет право на жизнь, но есть куча других способов, так что не надо толкать свой вариант, как самый верный.

[Алексей Уколов]

Ну и что, что куски, ну и что, что в json, ну и что, что перебираете, ну и что, что производите рендер? От этого идея обработки произвольного html регулярными выражениями не становится хорошей. Действительно, можно написать регулярное выражение, которое будет решать задачу в 99% случаев. Но а) его будет сложно поддерживать, потому что оно получится нечитаемым и б) останется 1%, когда оно работать не будет.

Нет ни одной причины не использовать рекурсивный обход DOM в данной задаче.

P.S. Мы на "ты" не переходили.

[Хазрат Гаджикеримов]

Алексей Уколов, думаю стоит закончить, ВАШЕ решение меня не устраивает

[Алексей Уколов]

На вопрос подписаны и другие люди, плюс сюда будут попадать из поиска. Для них пример простого и правильного решения я добавил в ответ.

[Хазрат Гаджикеримов]

Алексей Уколов, Спасибо, согласен, другим ваш вариант подойдет

[Алексей Уколов]

Хазрат Гаджикеримов, давайте попробуем перевести обсуждение в более конструктивное русло.
Почему вы считаете, что это решение вам не подходит? Оно никак не конфликтует с экосистемой и философией Реакта и обладает преимуществами, которые я выше перечислил.
Чего я не понимаю, в вашей задаче?

[Хазрат Гаджикеримов]

Алексей Уколов, Дело в том, что я не хочу обходить рекурсивно DOM, для выделения, мне удобнее добавить к текущему методу дополнительный map для выделения слов вот и все, а как быть в вашем случае, если пользователь изменил поисковую фразу? обходить рекурсивно все дерево и удалять выделенные слова? Если так, то этот подход не очен эффективный + очень затратный, ведь DOM штука медленная, а рекурсивно обходить... доставит проблемы для мобильных устройства, если будет достаточно много вопросов/ответов в разделе

[Алексей Уколов]

А какую задачу вы вообще решаете? У вас и json и пользовательский ввод... Непонятно, что вы делаете вообще.

мне удобнее добавить к текущему методу дополнительный map для выделения слов

Ну, это уже вопрос организации кода. Никто же не мешает мой код выделить в метод и передать этот метод в map.

очень затратный, ведь DOM штука медленная

Вот тут вы заблуждаетесь. Затратно и медленно работать с большими деревьями, которые добавлены в основной документ. В данном случае они точно не рендерятся на странице и, как я понимаю, не являются очень большими.

Сложные регулярные выражения, особенно генерируемые на лету, ничуть не менее ресурсозатратны.

[Saboteur]

Хазрат Гаджикеримов, Прислушайтесь к Алексею.
Я читаю курсы по регуляркам в крупной компании, и могу экспертно сказать - разбор и парсинг современного HTML регулярками - совершенно неправильная задача.
Если в 2000 году регулярки подходили , то сейчас - парсить регулярками html это некорректно, тем более что хорошие библиотеки работающие с DOM есть под все нужды.

[Хазрат Гаджикеримов]

Saboteur, Вы не совсем поняли) у меня json файл где около 20 вопросов/ответов, которые состоят из тегов , есть поисковое поле, с помощью регулярки я сортирую вопросы, и параллельно подсвечиваю их при обходе, НО Я НЕ ОБХОЖУ ДЕРЕВО DOM РЕГУЛЯРКАМИ

[Хазрат Гаджикеримов]

Алексей Уколов, этот спор может продолжаться бесконечно, мой вопрос заключался не в помощи организации данной задачи, а в поиске регулярного выражения, спасибо за помощь, но увы

[Saboteur]

Хазрат Гаджикеримов, окей, если следовать именно вашему примеру - регулярка с вашей задачей просто не справится.

Тут нужен алгоритм, а регулярка - это, хоть и умный, но шаблон.

[Хазрат Гаджикеримов]

Saboteur, мне кажется все это решаемо, например чем обходить рекурсивно все дерево, легче с помощью другой регулярки обойти текст и внутри ссылок из примера выше, получится 2 обхода, но по мне это проще, чем непосредственно влиять на страницу, в этом случае все будет иммутабельно, и при рендере страницы, в варианте от Уколова, не потеряются выделенные данные

[Алексей Уколов]

Да блин. Ну блин. Блин... Я не предлагаю влиять на страницу.

Постройте DOM в памяти на основании вашей разметки из файла, пробегитесь по нему рекурсивно и поменяйте в строковых нодах что хотите на что хотите. А потом приведите этот DOM снова к строке.

В итоге - у вас на входе оригинальный массив строк, на выходе массив изменённых строк, всё иммутабельно и ничего не теряется. Ровно как с регулярками, только без костылей.

Вот так: jsfiddle.net/alexey_m_ukolov/nfah953z/10

[Хазрат Гаджикеримов]

Алексей Уколов, фигня, а не вариант

[Алексей Уколов]

Вы можете конкретно объяснить что не так, а ещё лучше сделать пример на jsfiddle? Явно один из нас чего-то не понимает, я хочу разобраться до конца. Если это я - буду рад признать ошибку.

[Хазрат Гаджикеримов]

Алексей Уколов, думаю да, скоро я предоставлю пример

[Saboteur]

Хазрат Гаджикеримов,

Окей, когда найдете вариант с регулярками, обязательно поделитесь.

Но подозреваю, что это будет велосипед типа обход ДОМ в цикле, только уже регулярками, то есть хуже, чем то что есть.
Либо вы не найдете, что будет потдверждать то, что мы уже вам говорим - данная задача не решается регулярками.

[Алексей Уколов]

Жаль, что примера так и не появилось...

[Хазрат Гаджикеримов]

Алексей Уколов, времени не хватет, но решить проблему я смог с помощью регулярок, можете посмотреть по ссылке
в поисковое поле введите слово app или store и раскройте первый блок, там будет выделен текст в ссылках

[Хазрат Гаджикеримов]

Алексей Уколов, постараюсь в выходные выложить пример на codepen именно для вас

[Алексей Уколов]

Спасибо, живого примера достаточно. Как я и думал, вашу реализацию функции select можно заменить моей без каких-либо проблем. Но если вас ваше решение устраивает и прям сильной жести в контенте faq не ожидается, то и регулярку можно оставить.