Javascript - global string replacement between tags

Question

Can someone help me with javascript regexp code to replace all tags with <br />the newline character \ "\ n" found within <pre>. For example, the lineA function passed, containing the following:

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

Should be returned as (new lines not shown, although I hope you understand this idea):

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

Another example:

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

Return:

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

Note that the contents of the class and section are dynamic, along with other contents in the line (other divs, etc.). On the other hand, the tag <br />does not change, so there is no need to service <br>or other options.

NB - I work with strings, not HTML elements. Just in case, there is some confusion as I presented the question.

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

<br /> <br /> innerHTML

: , ,

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

I (and others) find it a bad idea to use regular expressions to parse html (or xml). You probably want to use a recursive state machine. Will there be a similar solution to the problem? There is a lot of room for optimization, but I think this illustrates.

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