Показать сообщение отдельно
  #1 (permalink)  
Старый 24.02.2024, 00:11
Новичок на форуме
Отправить личное сообщение для Firefly Посмотреть профиль Найти все сообщения от Firefly
 
Регистрация: 26.06.2021
Сообщений: 5

Проблема с заменой текста на странице
Подскажите, как исправить этот пример.
При нажатии на кнопку нужно выделить цветом слова "world".
В первом span-элементе все правильно, а во втором - возникает проблема (портится верстка, выделяется не то, что надо), т.к. присутствуют символы < >


<html>
<head>
	<script>
function changeColor(){
	var colorStyle = 'background-color: #00ff00;';
	var rx = new RegExp('(world)', 'gi');

	var xpath = document.evaluate(
		'.//text()[normalize-space() != "" ]',
		document.body, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
	
	for (var i = 0, len = xpath.snapshotLength; i < len; i++) {
		var textNode = xpath.snapshotItem(i);
		var sp = document.createElement('span');
		sp.innerHTML = textNode.nodeValue.replace(rx, '<span style="' + colorStyle + '">$1</span>');
		textNode.parentNode.replaceChild(sp, textNode);
	}
}
	</script>
</head>

<body>
<div>
	<span>tag helloworld is used all over the world</span> <br>
	<span>tag &lt;helloworld&gt; is used all over the world</span>
</div>
<button onclick="changeColor();">button</button>
</body>
</html>
Ответить с цитированием