Проблема с заменой текста на странице
Подскажите, как исправить этот пример.
При нажатии на кнопку нужно выделить цветом слова "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 <helloworld> is used all over the world</span>
</div>
<button onclick="changeColor();">button</button>
</body>
</html>
|