How to replace Html tags using Javascript

Question

I've html contents fetched using Webservices but its return incorrect html formatting which breaks the page.

it returns self closing anchor tag which i need to correct.

<p><a name="Example"/></p>

i was trying this code below to correct the above code to

<p><a name="Example"></a></p>

but it doesn't work-

var obj1 = document.getElementsByTagName('html')[0];;
obj1.innerHTML = obj1.innerHTML.replace(/\/><\/p>/g, '></a></p>');

I'm not sure but it seems to be an issue with my regex.

Answer 1

I don't think the issue (or at least the most important issue) is your regex. More important is the fact that the browser has to parse ill-formed HTML and may switch it around internally in potentially unexpected ways. The results may even differ from browser to browser.

The code snippet below shows the result of the browser trying to interpret the input html you provided. When I run this in the Stack Overflow code snippet in Firefox v44.0.2, the input of <p><a name="Example"/a></p> comes out as <p><a name="Example"></a></p><a name="Example"> </a> . Note that the code is modified in at least 3 ways:

1. a proper closing tag is inserted
2. the html within the p tag is duplicated outside of it
3. the duplicated code even differs with respect to white space

Note: that's before me even trying any further manipulation.

Thus, it's hard to know even what the input to your regex will be, making it very difficult to know how to write a regex, or any other algorithm, to clean it up further. If you can determine that most of the mistakes in your input html are of the same kind (eg multiple self-closing anchor tags are the only problem), you may be able to "fix" them using, eg a regex. However, if the html is written badly in a whole variety of ways, I wonder if you're going to have to figure out another way to clean up the code (eg manually?!).

 var obj1 = document.getElementsByTagName('div')[0]; var inner = obj1.innerHTML .replace(/</g, "&lt;") .replace(/>/g, "&gt;"); document.write("<p>The following shows what is actually retrieved by 'obj1.innerHTML':</p>"); document.write(inner); 

 <div> <p><a name="Example"/></p> </div>