@Vakas
php-программист

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

У меня на странице есть специальная вставка {DATETIME} - мне ее надо найти и заменить на текст.
В данном примере заменить на нужную дату.
Вот так в принципе работает
document.body.innerHTML = document.body.innerHTML.replace(/{DATETIME}/g, '03 мая 15:00');


Но после этого перестает работать другой скрипт обработки формы.
Можно как то более элегантно найти текст и заменить его, а не у всего документа делать поиск и замену?
  • Вопрос задан
  • 1198 просмотров
Решения вопроса 2
profesor08
@profesor08 Куратор тега JavaScript
Тебе надо пробежать по документу и выбрать все текстовые ноды, таким образом ты не затронешь другие элементы и их поведение. Заменяя все ты создаешь новый документ и для него надо заново все инициализировать. Чтоб избежать всего этого надо работать с текстовыми нодами.

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___");


Ответ написан
space2pacman
@space2pacman
Просто царь.
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");
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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