How to compare HTML?

[anishakamble]

Hey,

Just a quick question. Can this be used to compare HTML snippets? I tried and the diff is coming out garbled. I think it is processing the HTML tags rather than treating them as plaintext. Here is an example using Angular2.

[randysd]

Here's a simple solution for comparing strings that include html tags. Since this component appears to render or ignore html tags when doing the diff comparison, I simply replaced the greater-than & less-than signs with something that looks similar but is technically not those characters so this component won't see them as html tags and therefore treat them simply as text to compare.

HTML indicators:
< U+003C: Less-Than Sign
> U+003E: Greater-Than Sign

Replacement indicators:
˂ U+02C2 Modifier Letter Left Arrowhead
˃ U+02C3 Modifier Letter Right Arrowhead

In the HTML page where I am displaying the diff results I have this:
<pre semanticDiff [left]="flattenHtml(left)" [right]="flattenHtml(right)"></pre>

And in the typescript code this is what that function looks like:
flattenHtml(strText) {
return strText.replace(/</g, '˂').replace(/>/g, '˃');
}