Javascript - Global replace string between tags

Question

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

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

Should be returned as (newlines not shown, though I hope you get the idea):

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

Another example:

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

Returned as:

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

Note that the class and division content is dynamic, along with other content in the string (other divs etc). On the other hand, the <br /> tag does not change, so there's no need to cater for <br> or other variants.

NB - I'm working with strings, not HTML elements.. Just in case there is any confusion by the way I have presented the question.

Graham: In a comment below, you say something that really needs to be in the question above, specifically that there is other content being passed as part of the string outside the pre tags. So from your comment, it sounds as though you're saying another example string would be "<div>foo<br />bar<pre>1<br />2</pre></div>", with the expected result "<div>foo<br />bar<pre>1(newline)2</pre></div>". That completely changes the question. — T.J. Crowder
– T.J. Crowder, Commented Dec 16, 2010 at 12:55
By the way - if you are using javascript, you are likely in a browser. If you render the string in a container, you can use DOM to parse it. — mplungjan
– mplungjan, Commented Dec 16, 2010 at 13:16

Spiny Norman · Accepted Answer · 2010-12-16 13:41:39Z

5

You could use

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

And then for all matches

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

So probably something like this:

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

EDIT: changed to match <pre class=""> as well.

edited Dec 16, 2010 at 13:41

answered Dec 16, 2010 at 12:42

Spiny Norman

8,3271 gold badge34 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Graham Over a year ago

No sorry Spiny Norman. There are other div tags in the string

user160820 Over a year ago

but within the <pre> tag you will see the \n as it is, not the new line.

Graham Over a year ago

@user160820 This question is to resolve a compatibility issue with Joomla JCE Editor and RJ_InsertCode. Within <pre> tags, newline characters are converted to <br /> upon loading an article (luckily it works fine when saving content)

Spiny Norman Over a year ago

Ok, then you could first get all occurrences of <pre> tags using /<pre>(.*?)<\/pre>/g, replace the <br /> s out of that and then replace the old <pre> tags with the new ones. There's probably a single regexp you could use for this whole operation, but this should do as well.

Graham Over a year ago

That sounds like a great approach Spiny. I'm only familiar with global or single string replacements - could you guide me as to how I could handle multiple occurrences?

|

Community · Accepted Answer · 2017-05-23 11:52:07Z

0

HAD it been a document then

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

since <br /> could be <BR /> in some innerHTML implementations

Have a look here too: Replace patterns that are inside delimiters using a regular expression call

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Dec 16, 2010 at 12:42

mplungjan

180k29 gold badges183 silver badges246 bronze badges

3 Comments

Graham Over a year ago

Thankyou for your contribution mplungjan, though I need a solution that works with strings (not document HTML elements).

user160820 Over a year ago

but within the <pre> tag you will see the \n as it is, not the new line.

mplungjan Over a year ago

Not correct user160820, I think you are confusing the pre with xmp

Tim Down · Accepted Answer · 2010-12-16 14:45:38Z

You could use the DOM to do this and avoid trying to parse HTML with regex. However, this will leave you at the mercy of the browser's implementation of innerHTML. For example, IE will return tag names in upper case and will not necessarily close all tags.

See it in action: 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));

Hemlock · Accepted Answer · 2010-12-17 03:53:22Z

I (and others) think its a bad idea to use regular expressions to parse html (or xml). You probably want to use a recursive state machine. Will something like this resolve the issue? There's a lot of room to optimize, but I think it 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('');
}

Matt Booth · Accepted Answer · 2024-06-11 05:25:24Z

0

I use this type of 'replaceBetween' quite alot and have this method for it..

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

answered Jun 11, 2024 at 5:25

Matt Booth

2,1233 gold badges15 silver badges20 bronze badges

Collectives™ on Stack Overflow

Javascript - Global replace string between tags

5 Answers 5

9 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related