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

Question

[Aligatro]

Добрый вечер, появилась нетривиальная потребность в подсвечивании текста в документе. Библиотеки которые я нашел никак не хотят работать с текстом внутри 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'ает совпадения в "совпадение обернутое в тег".

Comments

[Иван]

а из-за чего она должна подсвечиваться?И в чем именно проблема

[Aligatro]

Да в целом не суть важно, выделить текст любым не блочным элементом.

Answer 1

[Сергей Соколов]

mark.js умеет "across elements"

Демо

Comments

[Aligatro]

Пробовал, не получилось - https://codepen.io/anon/pen/NvWJNx. Если поиск по словам, проходит по всем нодам, если поиск целиком - не справляется. Ну или я чего-то не понял =)

[Сергей Соколов]

нужны две опции: acrossElements : true, separateWordSearch: false

Добавил ссылку на рабочее демо в ответ.

Answer 2

[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);//Строка без тегов

Comments

[Aligatro]

У меня проблема немного в другом, не просто очистить строку от тегов, а сначала очистить провести манипуляции с текстом а потом вернуть как было сохранив при это внесенные изменения в текст и оставив все на своих местах =)

[twobomb]

Aligatro: Ну как оно может оставить все на своих местах. Возьмем даже ваш пример найти

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

Ок мы нашли

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

, но там есть теги мы их убрали получили целую строку если я отредактирую ее до такого состояния

«Почемуй стабильноно алалал поняаватие аллалал апополитического процесса.

или совсем сотру эту строку. То как эту строку можно собрать в обратное состояние? Как мне понять где ставить эти теги и нужны ли они вообще

Answer 3

[Роман Александрович]

jsfiddle.net/85fb2LcL

Comments

[Сергей Соколов]

вы просто взяли текст без тегов. Вопрос ТС, как я понял, выделить текст, сохраняя исходные теги, которые разделяют текст на части.

[Aligatro]

Насколько я понял код просто стрипает теги, но мне надо их не просто стрипнуть а стрипнуть -> изменить текст -> вернуть как было + измененный текст.

Answer 4

[dummyman]

console.log(document.body.innerText);

Вместо document.body можно использовать, например, document.querySelector('p')
Или даже так

Array.from(document.querySelectorAll('p')).map(el=>el.innerText)

Answer 5

[Павел Корнилов]

Не совсем уверен, что я правильно понял ТЗ, хоть и перечитал дважды. Я путь к решению увидел примерно так:

<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>