Aligatro
@Aligatro
Turn food and coffee into software...

Как с помощью js убрать теги из строки, обернуть искомый текст и затем смержить правки?

Добрый вечер, появилась нетривиальная потребность в подсвечивании текста в документе. Библиотеки которые я нашел никак не хотят работать с текстом внутри DOM дерева, только plain text, потому последние 2 часа я велосипедил свою. Прийти к более менее вменяемому результату удалось и процент попаданий вырос, но все равно не то.

В целом необходимо в подобном html куске кода
<p><strong>Тема: «Почему стабильно понятие модернизации?»</strong></p><p>Технология коммуникации важно символизирует конструктивный элемент политического процесса. Рационально-критическая парадигма определяет онтологический тоталитарный тип политической культуры. Авторитаризм <b>верифицирует</b> эмпирический континентально-европейский тип политической культуры, впрочем, не все политологи разделяют это мнение. Политическая социализация приводит прагматический марксизм. Политическая легитимность фактически интегрирует современный доиндустриальный тип политической культуры.</p><p>Авторитаризм доказывает континентально-европейский тип политической культуры (отметим, что это особенно важно для гармонизации политических интересов и интеграции общества).</p><p>Политическая элита формирует бихевиоризм (отметим, что это особенно важно для гармонизации политических интересов и интеграции общества). Капиталистическое мировое общество самопроизвольно. Коллапс Советского Союза теоретически возможен. Натуралистическая парадигма доказывает плюралистический тоталитарный тип политической культуры.</p><p>Правка №3 — еще одна правка! Проверка callback’a, редактирования от имени редактора!!!</p>

Найти например такой текст
«Почему стабильно понятие модернизации?» Технология коммуникации важно символизирует конструктивный элемент политического процесса.


Осложняется все разумеется тем что между любыми отрезками текста могут быть <p><strong><i><a><u>.

Спасибо.

P.s Если что на данный момент я разбиваю исходный текст по словам и собираю это всё в монструозную регулярку которая, replace'ает совпадения в "совпадение обернутое в тег".
  • Вопрос задан
  • 6857 просмотров
Пригласить эксперта
Ответы на вопрос 5
sergiks
@sergiks Куратор тега JavaScript
♬♬
mark.js умеет "across elements"

Демо
Ответ написан
twobomb
@twobomb
var s = "<p><strong>Тема: «Почему стабильно понятие модернизации?»</strong></p><p>Технология коммуникации важно символизирует конструктивный элемент политического процесса. Рационально-критическая парадигма определяет онтологический тоталитарный тип политической культуры. Авторитаризм <b>верифицирует</b> эмпирический континентально-европейский тип политической культуры, впрочем, не все политологи разделяют это мнение. Политическая социализация приводит прагматический марксизм. Политическая легитимность фактически интегрирует современный доиндустриальный тип политической культуры.</p><p>Авторитаризм доказывает континентально-европейский тип политической культуры (отметим, что это особенно важно для гармонизации политических интересов и интеграции общества).</p><p>Политическая элита формирует бихевиоризм (отметим, что это особенно важно для гармонизации политических интересов и интеграции общества). Капиталистическое мировое общество самопроизвольно. Коллапс Советского Союза теоретически возможен. Натуралистическая парадигма доказывает плюралистический тоталитарный тип политической культуры.</p><p>Правка №3 — еще одна правка! Проверка callback’a, редактирования от имени редактора!!!</p>";

s = s.replace(/<\/?[a-zA-Z]+>/gi,'');

alert(s);//Строка без тегов
Ответ написан
RomReed
@RomReed
JavaScript, Flutter, ReactNative, Redux, Firebase
dummyman
@dummyman
диссидент-схизматик
console.log(document.body.innerText);

Вместо document.body можно использовать, например, document.querySelector('p')
Или даже так
Array.from(document.querySelectorAll('p')).map(el=>el.innerText)
Ответ написан
Комментировать
KorniloFF
@KorniloFF Куратор тега JavaScript
Работаю по font-end / JS
Не совсем уверен, что я правильно понял ТЗ, хоть и перечитал дважды. Я путь к решению увидел примерно так:

<div id="text1">
  <p><strong>Тема: «Почему стабильно понятие модернизации?»</strong></p>
  <p>Технология коммуникации важно символизирует конструктивный элемент политического процесса. Рационально-критическая парадигма
    определяет онтологический тоталитарный тип политической культуры. Авторитаризм <b>верифицирует</b> эмпирический континентально-европейский
    тип политической культуры, впрочем, не все политологи разделяют это мнение. Политическая социализация приводит прагматический
    марксизм. Политическая легитимность фактически интегрирует современный доиндустриальный тип политической культуры.</p>
  <p>Авторитаризм доказывает континентально-европейский тип политической культуры (отметим, что это особенно важно для гармонизации
    политических интересов и интеграции общества).</p>
  <p>Политическая элита формирует бихевиоризм (отметим, что это особенно важно для гармонизации политических интересов и интеграции
    общества). Капиталистическое мировое общество самопроизвольно. Коллапс Советского Союза теоретически возможен. Натуралистическая
    парадигма доказывает плюралистический тоталитарный тип политической культуры.</p>
  <p>Правка №3 — еще одна правка! Проверка callback’a, редактирования от имени редактора!!!</p>
</div>

<script>
  var t= document.getElementById('text1'), pravki=[]; // .textContent
  [].forEach.call(t.querySelectorAll('p'), function(i) {
    if(/правка №/i.test(i.textContent)) {
      pravki.push(i.textContent);
      t.removeChild(i);
    }
  }) ;
  console.log("Текст без правок:", t.innerHTML);
  console.log("Текст без тегов:", t.textContent);
  console.log("Правки:", pravki);
</script>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы