285

I wrote a regex to fetch string from HTML, but it seems the multiline flag doesn't work.

This is my pattern and I want to get the text in h1 tag.

var pattern= /<div class="box-content-5">.*<h1>([^<]+?)<\/h1>/mi
m = html.search(pattern);
return m[1];

I created a string to test it. When the string contains "\n", the result is always null. If I removed all the "\n"s, it gave me the right result, no matter with or without the /m flag.

What's wrong with my regex?

6
  • 15
    Don't use regular expressions to parse HTML, HTML is NOT a regular language. Use a HTML parser, resp. the DOM. That is also much simpler.
    – Svante
    Jul 1, 2009 at 11:24
  • You're looking for DOTALL, not multiline.
    – Vanuan
    Oct 17, 2014 at 21:25
  • Note that JavaScript will soon have the dotAll modifier so you can do /.../s and your dots will also match new lines. As of July 2017 it's behind a flag in Chrome.
    – user993683
    Jul 17, 2017 at 13:48
  • @Svante "Don't use regular expressions to parse HTML": this is not parsing. Let us not to learn Chinese just for finding a '鱼'. Dec 15, 2020 at 1:27
  • You can call it like you want, but the actual question seems to be “how do I find the h1 headline in the div box-content-6?” while this regex (when it works) seems rather like “give me the last h1 headline that appears after the start tag of the div box-content-6” and even fails at that e. g. when there are matching parts that are commented out. With a parser, you just parse, then query, which, depending on the language, might be e. g. just a css selector ".box-content-5 h1". This is simpler, much more correct, and obviously so.
    – Svante
    Dec 15, 2020 at 13:49

5 Answers 5

640

You are looking for the /.../s modifier, also known as the dotall modifier. It forces the dot . to also match newlines, which it does not do by default.

The bad news is that it does not exist in JavaScript (it does as of ES2018, see below). The good news is that you can work around it by using a character class (e.g. \s) and its negation (\S) together, like this:

[\s\S]

So in your case the regex would become:

/<div class="box-content-5">[\s\S]*<h1>([^<]+?)<\/h1>/i

As of ES2018, JavaScript supports the s (dotAll) flag, so in a modern environment your regular expression could be as you wrote it, but with an s flag at the end (rather than m; m changes how ^ and $ work, not .):

/<div class="box-content-5">.*<h1>([^<]+?)<\/h1>/is
9
  • 5
    @simo Match any whitespace or non whitespace character, effectively matching any character. It's like ., but matching whitespace too (\s) means it matches \n (which . doesn't do in JavaScript, or can be made to do with the s flag).
    – alex
    Nov 29, 2012 at 3:05
  • 45
    According to MDN, [^] also works to match any character, including newlines, in JavaScript. See developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    – Dan Allen
    Aug 4, 2014 at 9:20
  • 7
    For performance issues, it is highly recommended to use the *? quantifier instead of * in order to avoid greediness. This will avoid catching the last <h1> of the document: that's probably not what you want and that's not efficient as the regexp will continue to look for <h1> until the end of the string even if it has already found it before.
    – KrisWebDev
    Aug 22, 2014 at 9:03
  • 9
    The [^] version is way easier on the regexp compiler, and also more terse.
    – Erik Corry
    Feb 6, 2015 at 15:21
  • 2
    [^] works only in JavaScript (and other ECMAScript implementations), and can give wildly unexpected results if you try to use it in other flavors.
    – Alan Moore
    Jun 27, 2016 at 11:47
21

You want the s (dotall) modifier, which apparently doesn't exist in Javascript - you can replace . with [\s\S] as suggested by @molf. The m (multiline) modifier makes ^ and $ match lines rather than the whole string.

3
13

[\s\S] did not work for me in nodejs 6.11.3. Based on the RegExp documentation, it says to use [^] which does work for me.

(The dot, the decimal point) matches any single character except line terminators: \n, \r, \u2028 or \u2029.

Inside a character set, the dot loses its special meaning and matches a literal dot.

Note that the m multiline flag doesn't change the dot behavior. So to match a pattern across multiple lines, the character set [^] can be used (if you don't mean an old version of IE, of course), it will match any character including newlines.

For example:

/This is on line 1[^]*?This is on line 3/m

where the *? is the non-greedy grab of 0 or more occurrences of [^].

1
  • 1
    For those who wonder what [^] means: it is like a double negation: "match any character that is not in this empty list" and so it comes down to saying "match any character".
    – trincot
    Sep 5, 2018 at 7:21
9

The dotall modifier has actually made it into JavaScript in June 2018, that is ECMAScript 2018.
https://github.com/tc39/proposal-regexp-dotall-flag

const re = /foo.bar/s; // Or, `const re = new RegExp('foo.bar', 's');`.
re.test('foo\nbar');
// → true
re.dotAll
// → true
re.flags
// → 's'
0

My suggestion is that it's better to split the multiple-line string with "\n" and concatenate the splits of the original string and becomes a single line and easy to manipulate.

<textarea class="form-control" name="Body" rows="12" data-rule="required" 
                  title='@("Your feedback ".Label())'
                  placeholder='@("Your Feedback here!".Label())' data-val-required='@("Feedback is required".Label())'
                  pattern="^[0-9a-zA-Z ,;/?.\s_-]{3,600}$" data-val="true" required></textarea>


$( document ).ready( function() {
  var errorMessage = "Please match the requested format.";
  var firstVisit = false;

  $( this ).find( "textarea" ).on( "input change propertychange", function() {

    var pattern = $(this).attr( "pattern" );
    var element = $( this );

    if(typeof pattern !== typeof undefined && pattern !== false)
    {
      var ptr = pattern.replace(/^\^|\$$/g, '');
      var patternRegex = new RegExp('^' + pattern.replace(/^\^|\$$/g, '') + '$', 'gm');     

      var ks = "";
      $.each($( this ).val().split("\n"), function( index, value ){
        console.log(index + "-" + value);
        ks += " " + value;
      });      
      //console.log(ks);

      hasError = !ks.match( patternRegex );
      //debugger;

      if ( typeof this.setCustomValidity === "function") 
      {
        this.setCustomValidity( hasError ? errorMessage : "" );
      } 
      else 
      {
        $( this ).toggleClass( "invalid", !!hasError );
        $( this ).toggleClass( "valid", !hasError );

        if ( hasError ) 
        {
          $( this ).attr( "title", errorMessage );
        } 
        else
        {
          $( this ).removeAttr( "title" );
        }
      }
    }

  });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.