How to replace all html tags from <anything> to \n<anything>\n [using regexp (JavaScript)]

Question

How to replace all HTML tags from <anything> to \n<anything> and </anything> to <anything>\n

var text = "<anything>welcome</anything><anything>Hello</anything>";

result

var text = "\n<anything>welcome</anything>\n\n<anything>Hello</anything>\n";

This code will help you (match all tags)

</?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)/?>

Answer 1

Just don't parse HTML using regex. Read this: http://www.codinghorror.com/blog/2009/11/parsing-html-the-cthulhu-way.html

In JavaScript, you can turn HTML into DOM using the .innerHTML property, and after that you can use other DOM methods to traverse it.

Simple example (needs Firebug):

var div = document.createElement('div');
var html = '<p>foo <span>bar</span><br /></p>';
div.innerHTML = html;

function scan(node, depth) 
{
    depth = depth || 0;
    var is_tag = node.nodeType == 1; 
    var self_contained = false;
    if (is_tag) {
        self_contained = node.childNodes.length == 0;
        var tag_name = node.tagName.toLowerCase();
        console.log('<' + tag_name + (self_contained ? ' /' : '') + '>', depth);
    } else {
        console.log(node.data); 
    }
    for (var i = 0, n = node.childNodes.length; i < n; i++) {
        scan(node.childNodes[i], depth + 1);
    }
    if (!self_contained && is_tag) {
        console.log('</' + tag_name + '>', depth);
    }
}

scan(div);

Output:

<div> 0
<p> 1
foo
<span> 2
bar
</span> 2
<br /> 2
</p> 1
</div> 0

You could also modify this to output attributes and use the depth argument for indentation.

Answer 2

You can prettify xml without regex:

var text = "<anything>welcome</anything><anything>Hello</anything>";
var xml = new XML("<root>" + text + "</root>");
console.log(xml.children().toXMLString());

output:

<anything>welcome</anything>
<anything>Hello</anything>

Answer 3

Try this:

str.replace(/<(\/?)[a-zA-Z]+(?:[^>"']+|"[^"]*"|'[^']*')*>/g, function($0, $1) {
    return $1 === "/" ? $0+"\n" : "\n"+$0;
})

Answer 4

text = text.replace(/<(?!\/)/g, "\n<"); // replace every < (which are not followed by /) by \n<

Answer 5

Expanding on @Amarghosh's answer:

Assuming the HTML you are trying to parse is more complicated than your example (which I would guess it is) you may want to convert your HTML page into XHTML. This will allow you to use treat it as XML and do a number of things including:

• Use an XSL to transform the data
• Use .NET's extensive set of XML libraries to extract and manipulate the data.

I have done this in the past with a free .NET library called SGML.