Regex convert a to

Question

Input:

<div>Many</div><div>Lines</div><div>Goes</div><div>Here</div>

Expected output:

Many<br>Lines<br>Goes<br>Here

I tried an approach like this:

input = input.replace("<div>", ""),
input = input.replace("</div>", "<br>")

And while that works the solution is not optimal.

Cheers

Answer 1

Use global regex, instead of strings :

input = input.replace(/<div>/g, '');
input = input.replace(/<\/div>/g, '<br>');

console.log(input); // Many<br>Lines<br>Goes<br>Here<br> 

More details :

replace() function can take, as first parameter :

• a String, like '</div>'
• a RegExp, like /<\/div>/

Whatever you're using a String or a RegExp, replace() will find the first match, and replace it. The first match only.
You need to specify that the replace is global (ie. every match should be replaced).

You've got two options to make a global replace :

• Use regex flags :
  input.replace(/<\/div>/g, '<br>');
• Use the third parameter, which is a comination of flags :
  input.replace('</div>', '<br>', 'g');

Warning :

The use of the flags parameter in the String.replace method is non-standard. Instead of using this parameter, use a RegExp object with the corresponding flags.

As the third parameter way is not a standart, you're encouraged to use RegExp way.

Just for fun :

You also can do it in a single line :

input = input.replace(/<(\/)?div>/g, function(m, p) { return p ? '<br>' : ''; });
/*
input.replace(
    /<(\/)?div>/g,       -> regex to match '<div>' and '</div>'
    function(m, p) {     -> m = whole match, p = first capturing group
        return p         -> if p is defined, ie. if we've got a slash
            ? '<br>'     -> we matched '</div>', return '<br>'
            : '';        -> we matched '<div>', return ''
    }
);
*/

Answer 2

You could do:

input = replace(/<div>(.*?)<\/div>/, "$1<br>")

Several other options to perform replace using matched groups can be found in this question's answers.

Answer 3

Try to manipulate the DOM. The script below will produce what you need:

DEMO

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(
        newNode,
        referenceNode.nextSibling);
}

var divTags = document.getElementsByTagName('div');

for (var i = 0; i < divTags.length;) {
    var div = divTags[i];
    var text = document.createTextNode(div.innerHTML);

    div.parentNode.replaceChild(text, div);
    insertAfter(text, document.createElement('br'));
}

Answer 4

It would help if you gave us a better indication of what kind of strings can fall between the <div> and </div>.

http://regexr.com?37j2q

input = input.replace(new RegExp("<div>([a-zA-Z0-9]+)</div>", "mg"), "\$1<br>");

http://jsfiddle.net/2GwQv/2/