Javascript - 标签之间的全局替换字符串

Question

有人可以帮助我使用正则表达式 JavaScript 代码来用换行符替换所有

<br />

标签吗？ " 在

<pre>

分区中找到的字符。例如，传递给包含以下内容的函数的 string：

<pre class="exampleclass">1<br />2<br />3</pre>

应返回为（未显示换行符，但我希望您明白）：

<pre class="exampleclass">1(newline)2(newline)3</pre>

另一个例子：

<div>foo<br />bar<pre>1<br />2</pre></div>

返回为：

<div>foo<br />bar<pre>1(newline)2</pre></div>

请注意，类和分区内容以及字符串中的其他内容（其他 div 等）都是动态的。另一方面，

<br />

标签不会改变，因此不需要迎合

<br>

或其他变体。

注意 - 我正在使用字符串，而不是 HTML 元素。以防万一我提出问题的方式出现任何混淆。

Answer 1

你可以使用

str.match(/<pre(?:.*?)>(?:.*?)<\/pre>/g);

然后对于所有比赛

replaced = match.replace(/<br \/>/g, '\n');
str.replace(match, replaced);

所以可能是这样的：

var matches = str.match(/<pre(?:.*?)>(?:.*?)<\/pre>/g),
    len = matches.length,
    i;

for (i = 0; i < len; i++) {
    str = str.replace(matches[i], matches[i].replace(/<br \/>/g, '\n'));
}

编辑：更改为也匹配

<pre class="">

。

Answer 2

如果它是一份文件的话

var allPre = document.getElementsByTagName('pre');
for (var i=0,n=allPre.length;i<n;i++) {
   allPre[i].innerHTML=allPre[i].innerHTML.replace(/<br \/>/gi,"\n");
}

因为在某些innerHTML实现中

<br />

可能是

<BR />

也看看这里：使用正则表达式调用替换分隔符内的模式

Answer 3

您可以使用 DOM 来执行此操作，并避免尝试使用正则表达式解析 HTML。然而，这会让你受到浏览器实现

innerHTML

的支配。例如，IE 将返回大写的标签名称，并且不一定会关闭所有标签。

查看实际效果：http://jsfiddle.net/timdown/KYRSU/

var preBrsToNewLine = (function() {
    function convert(node, insidePre) {
        if (insidePre && node.nodeType == 1 && node.nodeName == "BR") {
            node.parentNode.replaceChild(document.createTextNode("\n"), node);
        } else {
            insidePre = insidePre || (node.nodeType == 1 && node.nodeName == "PRE");
            for (var i = 0, children = node.childNodes, len = children.length; i < len; ++i) {
                convert(children[i], insidePre);
            }
        }
    }

    return function(str) {
        var div = document.createElement("div");
        div.innerHTML = str;
        convert(div, false);
        return div.innerHTML;
    }
})();

var str = "<div>foo<br />bar<pre>1<br />2</pre></div>";
window.alert(preBrsToNewLine(str));

Answer 4

我（和其他人）认为使用正则表达式来解析 html（或 xml）是一个坏主意。您可能想使用递归状态机。这样的事情能解决问题吗？有很大的优化空间，但我认为这说明了问题。

function replace(input, pre) {
    var output = [];
    var tag = null;
    var tag_re = /<(\w+)[^>]*?(\/)?>/; // This is a bit simplistic and will have problems with > in attribute values
    while (tag_re.exec(input)) {
        output.push(RegExp.leftContext);
        input = RegExp.rightContext;
        tag = RegExp.$1;
        if (pre && tag == 'br') {
            output.push('\n');
        } else {
            output.push(RegExp.lastMatch);
        }

        if (!RegExp.$2) {
            // not a self closing tag
            output.push(replace(input, tag=='pre'));
            return output.join('');
        }
    }
    output.push(input);
    return output.join('');
}

Answer 5

我经常使用这种类型的“replaceBetween”，并且有这个方法..

function replaceBetween(input, start, end, newText) {
        var reg = new RegExp(start + ".*?" + end, "g");
        var newString = input.replace(reg, start + newText + end);
        return newString;
}