как-то так ...
<!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 => {
let span = document.createElement('span');
span.className = 'br';
let range = new Range();
let textNodes = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
const nodeList = [];
let txtNode = textNodes.nextNode();
while (txtNode) {
nodeList.push(txtNode);
txtNode = textNodes.nextNode();
}
for (let node of nodeList) {
let reg = /([a-z]+)/gi;
let search;
while ((search = reg.exec(node.nodeValue)) != null) {
let txt = search[0],
start = search.index,
end = start + txt.length;
let clone = span.cloneNode(true);
range.setStart(node, start);
range.setEnd(node, end);
range.surroundContents(clone);
reg.lastIndex = 0;
node = clone.nextSibling;
};
}
}
let elem = document.querySelector(".content");
replacing(elem);
})
</script>
</body>
</html>