How to use JavaScript regex over multiple lines?

Question

var ss= "<pre>aaaa\nbbb\nccc</pre>ddd";
var arr= ss.match( /<pre.*?<\/pre>/gm );
alert(arr);     // null

I'd want the PRE block be picked up, even though it spans over newline characters. I thought the 'm' flag does it. Does not.

Found the answer here before posting. SInce I thought I knew JavaScript (read three books, worked hours) and there wasn't an existing solution at SO, I'll dare to post anyways. throw stones here

So the solution is:

var ss= "<pre>aaaa\nbbb\nccc</pre>ddd";
var arr= ss.match( /<pre[\s\S]*?<\/pre>/gm );
alert(arr);     // <pre>...</pre> :)

Does anyone have a less cryptic way?

Edit: this is a duplicate but since it's harder to find than mine, I don't remove.

It proposes [^] as a "multiline dot". What I still don't understand is why [.\n] does not work. Guess this is one of the sad parts of JavaScript..

btw, you should to read: "Parsing Html: The Cthulhu Way" http://www.codinghorror.com/blog/archives/001311.html — Rubens Farias, Dec 30 '09 at 12:23
The link changed from the previous comment: http://blog.codinghorror.com/parsing-html-the-cthulhu-way/ (5yrs-ish later) — dab, Jan 04 '15 at 03:58

KrisWebDev · Answer 1 · 2013-05-10T11:27:50.660

345

DON'T use (.|[\r\n]) instead of . for multiline matching.

DO use [\s\S] instead of . for multiline matching

Also, avoid greediness where not needed by using *? or +? quantifier instead of * or +. This can have a huge performance impact.

See the benchmark I have made: http://jsperf.com/javascript-multiline-regexp-workarounds

Using [^]: fastest
Using [\s\S]: 0.83% slower
Using (.|\r|\n): 96% slower
Using (.|[\r\n]): 96% slower

NB: You can also use [^] but it is deprecated in the below comment.

edited May 10 '13 at 11:27

answered Apr 20 '13 at 11:20

KrisWebDev

8,674
4
32
54

26

Good points, but I recommend against using `[^]` anyway. On one hand, JavaScript is the only flavor I know that supports that idiom, and even there it's used nowhere near as often as `[\s\S]`. On the other hand, most other flavors let you escape the `]` by listing it first. In other words, in JavaScript `[^][^]` matches any two characters, but in .NET it matches any *one* character other than `]`, `[`, or `^`. – Alan Moore Apr 20 '13 at 12:53
2

How do you know that `\S` will match `\r` or `\n` versus some other character? – Gili Nov 27 '13 at 21:38
7

See [this question](http://stackoverflow.com/questions/4544636/what-does-s-s-mean-in-regex-in-php) for \s\S details. This is a hack to match all white-space characters + all non-whitespace characters = all characters. See also [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp) for regexp special character documentation. – KrisWebDev Dec 01 '13 at 09:55
+1 `[\s\S]` is just what I need instead of `(.|\n)*` to prevent the result from creating an extra capturing group :) – Rebecca Abriam Nov 11 '16 at 00:17
So what is the solution, then? Is it ss.match( /
```
/gm ); or is it something else? Thanks.
```
– Douglas Held Dec 06 '16 at 15:02
7

Any reason to prefer `[\s\S]` over others, like `[\d\D]` or `[\w\W]`? – Phrogz Jun 19 '17 at 03:34
1

Let me quickly point out that your test for the greedy operator is rigged. `/
Can[^]*?/` doesn't matches the same content as `/
Can[^]*/`. The greedy variant should be changed to `/
(?:[^))*/` to match the same content.
– 3limin4t0r Sep 25 '18 at 17:24

score 271 · Accepted Answer · edited May 23 '17 at 11:47

271

[.\n] does not work because . has no special meaning inside of [], it just means a literal .. (.|\n) would be a way to specify "any character, including a newline". If you want to match all newlines, you would need to add \r as well to include Windows and classic Mac OS style line endings: (.|[\r\n]).

That turns out to be somewhat cumbersome, as well as slow, (see KrisWebDev's answer for details), so a better approach would be to match all whitespace characters and all non-whitespace characters, with [\s\S], which will match everything, and is faster and simpler.

In general, you shouldn't try to use a regexp to match the actual HTML tags. See, for instance, these questions for more information on why.

Instead, try actually searching the DOM for the tag you need (using jQuery makes this easier, but you can always do document.getElementsByTagName("pre") with the standard DOM), and then search the text content of those results with a regexp if you need to match against the contents.

edited May 23 '17 at 11:47

Community

1
1

answered Dec 30 '09 at 18:29

Brian Campbell

289,867
55
346
327

What I'm doing is making .wiki -> HTML conversion on the fly, using JavaScript. Therefore, I don't have the DOM available, yet. Wiki file is mostly its own syntax, but I allow HTML tags to be used if needed. Your advice is *very* valid, if I was dealing in DOM with this. Thanks. :) – akauppi Jan 04 '10 at 14:34
Fair enough. I suppose that is a valid reason to want to use regexes on HTML, though wiki syntaxes mixed with HTML can have all kinds of fun corner cases themselves. – Brian Campbell Jan 04 '10 at 14:56
2

`[\r\n]`applied to a sequence \r\n, would first match \r and then \n. If you want to match the entire sequence at once, regardless of whether that sequence is \r\n or just \n, use the pattern `.|\r?\n` – Eirik Birkeland Apr 23 '16 at 21:47
2

To match an _entire_ multiline string, try the greedy `[\s\S]+`. – Boaz Oct 29 '18 at 14:42
I just want to add for posterity that JS regex syntax ignoring the meaning of `.` inside `[]` is **different** than other regex frameworks, particularly the advanced one in .NET. People, please do not assume that regexes are cross platform, they frequently are **not**!! – Mr. TA Feb 09 '19 at 14:09
Also, be careful with escaping: In `new RegExp('...')` you will need `[\\s\\S]` whereas in `/.../` a simple `[\s\S]` is sufficient! Another thing to be aware of is to NOT use the multiline flag! – bersling Apr 23 '21 at 05:02

score 30 · Answer 3 · answered Apr 11 '18 at 04:17

You do not specify your environment and version of Javascript (ECMAscript), and I realise this post was from 2009, but just for completeness, with the release of ECMA2018 we can now use the s flag to cause . to match '\n', see https://stackoverflow.com/a/36006948/141801

Thus:

let s = 'I am a string\nover several\nlines.';
console.log('String: "' + s + '".');

let r = /string.*several.*lines/s; // Note 's' modifier
console.log('Match? ' + r.test(s); // 'test' returns true

This is a recent addition and will not work in many current environments, for example Node v8.7.0 does not seem to recognise it, but it works in Chromium, and I'm using it in a Typescript test I'm writing and presumably it will become more mainstream as time goes by.

This works great in Chrome (v67) but completely breaks the regex (also stops working line-by-line) in IE11 and IEdge(v42) — freedomn-m, Jul 25 '18 at 06:35
Thanks @freedomn-m .. IE not supporting a very new feature is almost completely unsurprising :) But yes, it's worth mentioning where it doesn't work to save anyone trying to 'debug' why their attempt to use it isn't working as expected. — Neek, Aug 13 '18 at 08:11

score 12 · Answer 4 · answered Dec 30 '09 at 18:18

12

[.\n] doesn't work, because dot in [] (by regex definition; not javascript only) means the dot-character. You can use (.|\n) (or (.|[\n\r])) instead.

answered Dec 30 '09 at 18:18

Y. Shoham

9,408
7
34
44

26

`[\s\S]` is the most common JavaScript idiom for matching everything including newlines. It's easier on the eyes and much more efficient than an alternation-based approach like `(.|\n)`. (It literally means "any character that *is* whitespace or any character that *isn't* whitespace.) – Alan Moore Jan 04 '10 at 17:04
2

You're right, but the question was about `.` and `\n`, and why `[.\n]` doesn't work. As mentioned in the question, the `[^]` is also nice approach. – Y. Shoham Jan 04 '10 at 18:01

score 7 · Answer 5 · answered Jul 04 '17 at 13:10

7

I have tested it (Chrome) and it working for me( both [^] and [^\0]), by changing the dot (.) by either [^\0] or [^] , because dot doesn't match line break (See here: http://www.regular-expressions.info/dot.html).

var ss= "<pre>aaaa\nbbb\nccc</pre>ddd";
var arr= ss.match( /<pre[^\0]*?<\/pre>/gm );
alert(arr);     //Working

answered Jul 04 '17 at 13:10

Hzzkygcs

644
7
14

1

The problem with `[^\0]` is that it won't match null characters even though null characters are allowed in Javascript strings (see [this answer](https://stackoverflow.com/a/13698720/4284627)). – Donald Duck Feb 16 '19 at 11:15

score 0 · Answer 6 · answered Feb 16 '18 at 07:04

0

In addition to above-said examples, it is an alternate.

^[\\w\\s]*$

Where \w is for words and \s is for white spaces

answered Feb 16 '18 at 07:04

azhar22k

2,969
1
17
21

score 0 · Answer 7 · answered Jan 03 '21 at 07:22

0

[\\w\\s]*

This one was beyond helpful for me, especially for matching multiple things that include new lines, every single other answer ended up just grouping all of the matches together.

answered Jan 03 '21 at 07:22

Julian Berryessa

11
1

score 0 · Answer 8 · answered Feb 01 '21 at 22:42

0

Now there's the s (single line) modifier, that lets the dot matches new lines as well :) \s will also match new lines :D

Just add the s behind the slash

 /<pre.*?<\/pre>/gms

answered Feb 01 '21 at 22:42

Husi 012

81
2
12

How to use JavaScript regex over multiple lines?

8 Answers8

Linked

Related