正则表达式将<div>转换为<br/> </div>

Question

输入：

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

预期输出：

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

我尝试了这样的方法：

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

虽然这种方法有效，但解决方案并非最佳。

干杯

Answer 1

使用全局正则表达式而不是字符串：

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

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

更多详情：

replace()函数可以作为第一个参数：

• 一个字符串，如'</div>'
• 一个RegExp，如/<\/div>/

无论您使用的是String还是RegExp，replace()都会找到第一个匹配项，并替换它。 仅限第一场比赛。
您需要指定替换是全局的（即应该替换每个匹配）。

您有两个选项可以进行全局替换：

• 使用正则表达式标志：
  input.replace(/<\/div>/g, '<br>');
• 使用第三个参数，即标志的组合：
  input.replace('</div>', '<br>', 'g');

警告：

  

String.replace方法中flags参数的使用是非标准的。不要使用此参数，而是使用带有相应标志的RegExp对象。

由于第三种参数方式不是标准，因此鼓励您使用RegExp方式。

只是为了好玩：

您也可以在一行中完成：

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

你可以这样做：

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

可以在此question's answers中找到使用匹配组执行替换的其他几个选项。

Answer 3

尝试操纵DOM。下面的脚本将产生您所需的内容：

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

如果您更好地指出<div>和</div>之间可以包含哪种字符串，那将会有所帮助。

http://regexr.com?37j2q

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

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