Javascript нужна помощь в выделении текста тегов в html

проверьте мою демонстрацию, у меня есть html-текст:

<div id = "test">this is <a href = "#">my</a> <span>nice</span> <span> cool</span> text that needs highlighting my nice <span>cool</span> text</div>

Я видел пример того, как выделить строку в тегах html, который работает, но частично, если я ищу только два слова, он будет работать, но при поиске более двух слов он выделяет только первое слово и последнее слово в качестве этой демонстрации:

var src_str = $("#test").html();
var term = "my nice cool text";
//term = term.replace(/(\s+)/,"(<[^>]+>|[\\r\\n\\s]+)*");
term = term.split(' ').join('(<[^>]+>|[\\r\\n\\s]+)*')
//alert(term);
var pattern = new RegExp("("+term+")", "gi");

src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*|)((<[^>]+>)+|[\\r\\n\\s]+)([^<>]*</mark>)/,"$1</mark>$2<mark>$4");

$("#test").html(src_str);

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "test">this is <a href = "#">my</a> <span>nice</span> <span> cool</span> text that needs highlighting my nice <span>cool</span> text</div>

как вы можете видеть первую строку "nice cool", которая включает теги html, которые не выделены, вторая работает там что-то в последнем регулярном выражении, я не мог решить эту проблему, пожалуйста, спасибо, пожалуйста ..

решение:

Я нашел, что сумасшедший, но я не уверен, как это работает, но все равно работает вот демо:

var src_str = $("#test").html();
var term = "my nice cool top text";
//term = term.replace(/(\s+)/,"(<[^>]+>|[\\r\\n\\s]+)*");
term = term.split(' ').join('(<[^>]+>|[\\r\\n\\s]+)*')
//alert(term);
var pattern = new RegExp("("+term+")", "gi");

src_str = src_str.replace(pattern, "<span class=hit>$1</span>");
//alert(src_str);
src_str = src_str.replace(/(<span class=hit>[^<>]*)((<[^>]+>)+|[\\r\\n\\s]+)([^<>]*</span>|(<[^>]+>|[\\s]+)*)/,"$1</span>$2<span class=hit>$3$4");

$("#test").html(src_str);

.hit{color:red}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "test">this is <div>

<a href = "#"><br>my<br></a><span>
<br>
nice</span> <span> <br>cool<div>top</div></span> text that needs highlighting my nice <span>cool top</span> text</div>

</div>

лучшее решение:

var src_str = $("#test").html();
var term = "my nice cool text";
//term = term.replace(/(\s+)/,"(<[^>]+>|[\\r\\n\\s]+)*");
term = term.split(' ').join('(<[^>]+>|[\\r\\n\\s]+)*')
//alert(term);
var pattern = new RegExp("("+term+")", "gi");

document.body.innerHTML = document.body.innerHTML.replace(pattern, function(match){
var re = /(^|[>])(?![^<]*?</y)(.*?)([<]|$)/gi; 
match = match.replace(/(\r\n\t|\n|\r\t)/gm,"");

match = match.replace(re, function (m,g1,g2,g3) {
  return g1+"<b class='hit' style='color:black'>"+g2+"</b>"+g3;
});
//alert(match);
return match;
});

.hit{
background-color:yellow;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "test">this is <a href = "#">my</a> <span>nice</span> <span> cool</span> text that needs highlighting my nice <span>cool</span> text</div>

есть библиотека, какое-то найденное решение, которое работает в старом браузере, я думаю, вы можете это проверить:

https://github.com/padolsey/findAndReplaceDOMText

javascript regex tags match highlight

29.03.2018 23:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

122

Ответы 1

Не уверен, что это решит вашу проблему для всех ситуаций, но это должно сработать в данном конкретном случае:

var src_str = $("#test").text().replace(/\s\s+/g, ' '); //remove more than 1 space
var term = "my nice cool text";

var pattern = new RegExp("("+term+")", "gi");

src_str = src_str.replace(pattern, "<mark>$1</mark>");

$("#test").html(src_str);

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "test">this is <a href = "#">my</a> <span>nice</span> <span> cool</span> text that needs highlighting my nice <span>cool</span> text</div>

но я не хочу изменять исходный текст HTML в документе, но спасибо, это другой способ ...

— 29.03.2018 23:36

29.03.2018 23:32