Question

有人可以帮我使用正则表达式javascript代码，用 分区中的换行符“\ n”替换所有<pre>代码。例如，字符串传递给包含以下内容的函数：

<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等）。另一方面， 标记不会更改，因此无需为 或其他变体提供服务。

注意 - 我正在使用字符串，而不是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实现中可能是 

请看这里：Replace patterns that are inside delimiters using a regular expression call

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

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

4 个答案: