PDA

View Full Version : remove html comments from string



IRG
10-31-2008, 12:15 PM
What is the best way to get rid of html comments in a string? I need to check if there is anything in a div which is not a comment (it can be text, image or text and image).

I extract the content of div with innerHTML() function but it returns also all the comments. I get something like this

<--this is comment1-->this is my text.<--this is comment2-->

instead of

this is my text.

I could loop through a string and find substrings which contain "--" and then remove everything between them but I am wondering if there is a better way of doing it.

jscheuer1
11-01-2008, 04:02 AM
There is no innerHTML() function, it is a property of a tag. It is also, though widely supported, non-standard. So the best way would probably be to use DOM level 2 methods. However, they would be more complex than innerHTML.

Try this out:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<div id="test">
<!-- Hey -->Real Text<!-- There! --><span>Something in a nested tag<!-- another comment --></span>
</div>
<input type="button" onclick="alert(document.getElementById('test').innerHTML.replace(/<!--[^(-->)]+-->/g, ''));" value="Go!">
</body>
</html>

Here's the same thing using DOM level 2:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function nv(n){
n = n.cloneNode(true);
var nvhelper = function(n){
for (var c = n.childNodes, i = c.length - 1; i > -1; --i){
if(c[i].hasChildNodes) nvhelper(c[i]);
if(c[i].nodeType == 8) c[i].parentNode.removeChild(c[i]);
};
};
nvhelper(n);
alert(n.innerHTML);
};
</script>
</head>
<body>
<div id="test">
<!-- Hey -->Real Text<!-- There! --><span>Something in a nested tag<!-- another comment --></span>
</div>
<input type="button" onclick="nv(document.getElementById('test'));" value="Go!">
</body>
</html>

But, depending upon just what you wanted to do, it might be easier to use all DOM level 2, skip alerting the innerHTML, and go directly to the use you have planned for the node, once the comments are stripped.