title: Pattern attribute value is not a valid regular expression
body: <p>My HTML has the following input element (it is intended to accept email addresses that end in ".com"):</p>
  
  <pre><code>&lt;input type="email" name="p_email_ad" id="p_email_ad" value="" required="required" pattern="[\-a-zA-Z0-9~!$%\^&amp;amp;*_=+}{\'?]+(\.[\-a-zA-Z0-9~!$%\^&amp;amp;*_=+}{\'?]+)*@([a-zA-Z0-9_][\-a-zA-Z0-9_]*(\.[\-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?$" maxlength="64"&gt;
  </code></pre>
  
  <p>At some point in the past 2 months, Chrome has started returning the following JavaScript error (and preventing submission of the parent form) when validating that input:</p>
  
  <blockquote>
    <p>Pattern attribute value
    <code>[\-a-zA-Z0-9~!$%\^&amp;*_=+}{\'?]+(\.[\-a-zA-Z0-9~!$%\^&amp;*_=+}{\'?]+)*@([a-zA-Z0-9_][\-a-zA-Z0-9_]*(\.[\-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?$</code>
    is not a valid regular expression: Uncaught SyntaxError: Invalid
    regular expression:
    <code>/[\-a-zA-Z0-9~!$%\^&amp;*_=+}{\'?]+(\.[\-a-zA-Z0-9~!$%\^&amp;*_=+}{\'?]+)*@([a-zA-Z0-9_][\-a-zA-Z0-9_]*(\.[\-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?$/</code>: Invalid escape</p>
  </blockquote>
  
  <p><a href="https://regex101.com/" rel="nofollow noreferrer">Regex101.com</a> likes the regex pattern, but Chrome doesn't. What syntax do I have wrong?</p>