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

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

• javascript
• regex

• <br> is not clean, <br /> would be. – Rob Commented Dec 10, 2013 at 11:04
• Could you please let me know, what is input? is it any variable or control? – Vishal Patel Commented Dec 10, 2013 at 11:04
• "And while that works the solution is not optimal." No it doesn't. It only replaces the first one. – T.J. Crowder Commented Dec 10, 2013 at 11:04
• Your present example can be easily solved with string manipulations (with regex or not). But if you want to apply this to an HTML document in the real life, the best way is to use the DOM. – Casimir et Hippolyte Commented Dec 10, 2013 at 11:04
• 4 @Robert: There's nothing unclean about <br> unless you're using XHTML. The solidus at the end is tolerated in HTML on void elements; that's all. It has exactly zero effect. – T.J. Crowder Commented Dec 10, 2013 at 11:05

4 Answers 4

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 ination 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 ''
    }
);
*/

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.

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'));
}

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

http://regexr.?37j2q

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

http://jsfiddle/2GwQv/2/