Как с помощью JS сделать замену на странице в тексте, но не в атрибутах тегов?

Question

Евгений Обыкновенный @evgeniy8086

Как с помощью JS сделать замену на странице в тексте, но не в атрибутах тегов?

Как на странице с помощью JS сделать замену в тексте, но не в атрибутах тегов? А именно, надо в тексте все последовательности из цифр обернуть в теги span.
Если менять в innerHTML, то замены происходят и в атрибутах.
Если менять в innerText, то пропадают вложенные теги.

Вопрос задан более трёх лет назад
478 просмотров

3 комментария

Подписаться 6 Простой 3 комментария

Михаил @FFxSquall

Немешало бы привести пример html как сейчас и как надо.

Написано более трёх лет назад

Евгений Обыкновенный @evgeniy8086 Автор вопроса

<html>
  <head></head>
  <body>
    <div id="txt">
    <p style="width:100%;">Буквы <i>1234 буквы</i></p>
    <div style="width:100%;">Буквы 1234 буквы
     <div...>
      ...
      <p>Буквы <i style="color:#123456">1234 буквы <img src="" width=200></i></p>
      <p>Буквы <i style="color:#123456">1234 буквы <img src="" width=200></i></p>
      ...
     </div>
    </div>
    </div>
  <body>
</html>

<html>
  <head></head>
  <body>
    <div id="txt">
    <p style="width:100%;">Буквы <i><span color="myclass">1234</span> буквы</i></p>
    <div style="width:100%;">Буквы <span color="myclass">1234</span> буквы
     <div...>
      ...
      <p>Буквы <i style="color:#123456"><span color="myclass">1234</span> буквы <img src="" width=200></i></p>
      <p>Буквы <i style="color:#123456"><span color="myclass">1234</span> буквы <img src="" width=200></i></p>
      ...
     </div>
    </div>
    </div>
  <body>
</html>

Написано более трёх лет назад

SerzN1 @SerzN1

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

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

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

Похожие вопросы

HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 3 часа назад
- 20 просмотров
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- 3 часа назад
- 69 просмотров
0

ответов
HTML

+1 ещё

Простой
Как разместить елементы с разных блоков чтобы они перекрывали друг друга?
- 1 подписчик
- 6 часов назад
- 37 просмотров
1

ответ
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- 20 часов назад
- 120 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- 20 часов назад
- 142 просмотра
4

ответа
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 69 просмотров
1

ответ
Веб-разработка

+1 ещё

Простой
На сайте появились реклама, которая не должна быть?
- 2 подписчика
- вчера
- 244 просмотра
2

ответа
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- вчера
- 46 просмотров
0

ответов
Веб-разработка

+3 ещё

Простой
Какие параметры отвечают за rateLimit в Ingress kuberneties?
- 1 подписчик
- вчера
- 56 просмотров
2

ответа
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- вчера
- 105 просмотров
0

ответов
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Внедрить код Roistat

21 нояб. 2024, в 19:31

500 руб./за проект

VPN приложение на IOS

21 нояб. 2024, в 19:28

200000 руб./за проект

Реализовать аналитику для Telegram ADS

21 нояб. 2024, в 19:09

5000 руб./за проект

Немешало бы привести пример html как сейчас и как надо.
<html> <head></head> <body> <div id="txt"> <p style="width:100%;">Буквы <i>1234 буквы</i></p> <div style="width:100%;">Буквы 1234 буквы <div...> ... <p>Буквы <i style="color:#123456">1234 буквы <img src="" width=200></i></p> <p>Буквы <i style="color:#123456">1234 буквы <img src="" width=200></i></p> ... </div> </div> </div> <body> </html>

<html> <head></head> <body> <div id="txt"> <p style="width:100%;">Буквы <i><span color="myclass">1234</span> буквы</i></p> <div style="width:100%;">Буквы <span color="myclass">1234</span> буквы <div...> ... <p>Буквы <i style="color:#123456"><span color="myclass">1234</span> буквы <img src="" width=200></i></p> <p>Буквы <i style="color:#123456"><span color="myclass">1234</span> буквы <img src="" width=200></i></p> ... </div> </div> </div> <body> </html>
считать скобки (начала и окончания тегов) при замене - это базовый подход для таких вещей,
если что то поумнее то лучше написать регуляное выражение пропускающее все теги из замены

Answer 1 · 2019-01-21 22:54:45

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

findAndReplaceDOMText(document.getElementById('txt'), {
  find: /\d+/g, // искомая строка
  wrapClass: 'myclass', // класс элемента, в который будем оборачивать текст
  wrap: 'span' // название тега, в который будем оборачивать текст.
});

живой пример
jsfiddle.net/er0w4nxm/1

Как с помощью JS сделать замену на странице в тексте, но не в атрибутах тегов?

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

Минуточку внимания

Войдите на сайт