<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.br {
text-decoration: underline;
color: #0000FF;
}
</style>
</head>
<body>
<div class="content">
Комметарии в html коде выглядят так: <!-- comment -->.
</div>
<script>
window.addEventListener('load', function() {
const replacing = elem => {
for (let node, textNodes = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false); node = textNodes.nextNode();) {
let html = node.nodeValue.replace(/([a-z]+)/gi, '<span class="br">$1</span>');
let div = document.createElement('div');
div.innerHTML = html;
node.replaceWith(...div.childNodes)
}
}
let elem = document.querySelector(".content");
replacing(elem);
})
</script>
</body>