Как на javascript найти и заменить в тексте параметр?

Question

[Владимир Кащев]

У меня на странице есть специальная вставка {DATETIME} - мне ее надо найти и заменить на текст.
В данном примере заменить на нужную дату.
Вот так в принципе работает

document.body.innerHTML = document.body.innerHTML.replace(/{DATETIME}/g, '03 мая 15:00');

Но после этого перестает работать другой скрипт обработки формы.
Можно как то более элегантно найти текст и заменить его, а не у всего документа делать поиск и замену?

Comments

[Ярослав Иванов]

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

[Владимир Кащев]

Ярослав Иванов, а как найти перебирать все элементы?
я не знаю в каком месте пользователь вставит этот параметр.

[Ярослав Иванов]

Владимир Кащев, querySelectorAll(“*“)

[Ярослав Иванов]

Владимир Кащев, а вообще скинь пример на jsfiddle

[Владимир Кащев]

Ярослав Иванов, https://jsfiddle.net/Vakas/u1b0a6hc/1/
вот примерно так

Answer 1

[profesor08]

Тебе надо пробежать по документу и выбрать все текстовые ноды, таким образом ты не затронешь другие элементы и их поведение. Заменяя все ты создаешь новый документ и для него надо заново все инициализировать. Чтоб избежать всего этого надо работать с текстовыми нодами.

function replaceText(text, textToReplace) {

	function replace(nodes) {
  	nodes.forEach(node => {
      
      if (node instanceof HTMLScriptElement) {
      	return;
      }
      
      if (node instanceof HTMLStyleElement) {
      	return;
      }
      
    	if (node instanceof Text) {
      	if (node.nodeValue.match(text)) {
        	node.nodeValue = node.nodeValue.replace(text, textToReplace)
        }
      }
      else {
      	replace(Array.from(node.childNodes));
      }
    });
  }
  
  replace(Array.from(document.body.childNodes));
}

replaceText("{DATETIME}", "___WwW___");

Comments

[Владимир Кащев]

твое решение изящней, спасибо огромное

Answer 2

[Ярослав Иванов]

https://jsfiddle.net/space2pacman/gunb0v7a/20/

function replaceBreadCrumbs(label, text) {
  // функция работает до тех пор пока в тексте есть метка {DATETIME}
	if(!document.body.innerText.includes(label)) return false;

	var elements = document.querySelectorAll("*");
  var elementWithLabel;
  
  for(var i = 0; i < elements.length; i++) {
      // Проверка срабатывает на многих элемента, в которых вложенность но останавливается на последнем
      // <div><b>{DATETIME}</b></div> попадает под проверку
      // <b>{DATETIME}</b> - попадает и будет последний в проверке.
      if(elements[i].innerHTML.includes(label)) {
  	  elementWithLabel = elements[i]
      }
  }
  
  elementWithLabel.innerHTML = elementWithLabel.innerHTML.replace(label, text);
  // Запускаем функцию заново и ищем метки
  replaceBreadCrumbs.apply(null, arguments)
}

replaceBreadCrumbs("{DATETIME}", "03 мая 15:00");

Comments

[Владимир Кащев]

ты крут, респект тебе

[profesor08]

Только вот скрипт похерит все обработчики, которые висели на внутренних элементах. Постоянная выборка всех элементов. Жуть.

[Владимир Кащев]

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