Как произвести замену корректно?
 

Как заменить некоторые слова на странице на HTML-элемент при учёте того что эти слова также встречаются и в коде
Пример:

<div title="some text qwe some text">some text qwe some text</div>

Если заменять просто через replace:

document.body.innerHTML = document.body.innerHTML.replace(/qwe/g,'<img src="rty.png" \/>');

То получается вот такая каша:

<div title="some text <img src="rty.png" /> some text">some text <img src="rty.png" \/> some text</div>

А если же менять не innerHTML, а innerText:

document.body.innerText = document.body.innerText.replace(/qwe/g,'<img src="rty.png" \/>');

То портится не только часть с заменой, а весь документ

Как сказал бы Тёма: так

document.body.innerHTML = document.body.innerHTML ...

делают только мудаки.

Вариантов есть пара в зависимости от конкретной задачи, но скорее всего сама задача кривая.
1. Перебор элементов и замена в текстовых нодах.
2. Работа с selection/range.

Универсально просто наверное никак, нужно искать закономерности (удалять каждое второе совпадение, например, если всегда идёт пара: текст в атрибуте - текст)

нерекомендуемо, но и не запрещено, для простых случаев почему бы и нет

<div>text</div>
<div>text</div>

<script>
window.onload = function () {

	document.body.innerHTML = document.body.innerHTML.replace(/text/g, '<button>click</button>');
		
	var buts = document.getElementsByTagName('button');
	
	buts[0].onclick = function () {
		alert(1);
	}
	buts[1].onclick = function () {
		alert(2);
	}
	
}
</script>

В атрибутах если задавать, то тоже не плохо (а-а, в принципе уже несколько раз обсуждалось)

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

:yes: