Regular Expressions: A Workaround - Doc JavaScript

JavaScript Regular Expressions

A Workaround

If the user is running a browser that supports JavaScript but doesn't support regular expressions, an error is generated. The browser's JavaScript interpreter encounters an unrecognized literal (/.../) and reports an error. One can use either the RegExp() constructor or the eval() function instead. We'll use the first one.

First, take a look at our solution, which includes validation for older browsers that do not support regular expressions:

Your e-mail address:

Subject:

Comments:

<br/><input type="submit" value="Send Mail" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" /></form>
<p>This form's HTML is the same as the previous one, except that it doesn't generate an error on older browsers, and also demonstrates an alternative verification procedure. Here's the script (and the form):</p>
<p> </p><pre><code><font color="#0000cc"><SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<FORM METHOD="POST"
      ACTION="mailto:you@yourdomain.com"
      ENCTYPE="text/plain"
      onSubmit="</font><font color="#cc0000">return valid(this)</font><font color="#0000cc">">
Your e-mail address:<BR><INPUT TYPE="text" NAME="</font><font color="#cc0000">email</font><font color="#0000cc">" SIZE="40"><BR>
Subject:<BR><INPUT TYPE="text" NAME="subject" SIZE="40"><BR>
Comments:<BR><TEXTAREA NAME="comments" COLS="40" ROWS="5"></TEXTAREA><BR>
<INPUT TYPE="submit" VALUE="Send Mail">
</FORM></font></code></pre> 
<p>Before dealing with regular expressions, the function must check if they are supported by the browser:</p>
<p> </p><pre><code><font color="#0000cc">if (window.RegExp) ...</font></code></pre> 
<p>The <code><font color="#0000cc">window.</font></code> prefix is required because the <code><font color="#0000cc">if</font></code> statement cannot evaluate an object or property whose parent object is not explicitly specified (don't ask us why).</p>
<p>The function then assigns the regular expressions, as strings, to local variables. Notice that all backslashes must be escaped with a backslash (<code><font color="#0000cc">\\</font></code>), so these characters remain backslashes in the string. If you do not escape these backslashes, they are evaluated as metacharacters with the character that follows. The <code><font color="#0000cc">RegExp()</font></code> constructor requires its argument to be a regular expression, with the original backslashes in place. The string <code><font color="#0000cc">"\d"</font></code>, for example, is actually the same as <code><font color="#0000cc">"d"</font></code>, but in a regular expression these are not the same.</p>
<p>The next step is to create two regular expressions based on the above strings. In this script, the <code><font color="#0000cc">RegExp()</font></code> method is used to construct the regexps. The rest of the block is identical to the script in the previous section of this column.</p>
<p>After the <code><font color="#0000cc">else</font></code> statement, which is executed if the user is running a browser that does not support JavaScript regular expression, the function performs a very trivial e-mail verification, using the <code><font color="#0000cc">indexOf()</font></code> method to make sure the string has an "at" sign (<code><font color="#0000cc">@</font></code>).</p>
 
<p align="right"><a href="index-2.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="regular.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="modifiers.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="construct.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="rules.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="values.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="substitute.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="define.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="methods.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="backreferences.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="form.html"><img src="../gl.gif" height="18" width="18" border="0"/></a><a href="workaround.html"><img src="../bc.gif" height="18" width="18" border="0"/></a><a href="final.html"><img src="../gr.gif" height="18" width="18" border="0"/></a></p>
<p></p>
<center>
<p><a href="https://www.internet.com/" target="_top"><img src="../../img/URL.gif" border="0" width="161" height="18" alt="https://www.internet.com"/></a></p>
<p>     
</p><p><small>Created: October 23, 1997, 1997<br/>Revised: December 4, 1997<br/>URL: https://www.webreference.com/js/column5/workaround.html</small></p>
</center>                
                </div>
            <div id="right"><div class="image square quad" style='margin-bottom:20px;'>
    
<script language="JavaScript">
	var t=displayDFPTag("imu");
	document.write(t);

</script>
</div>
<div id="ssn_widget_container">
    <div id="ssn_widget_header">
        <h5><img border="0" align="absbottom" alt="Justtechjobs.com" src="https://images.justtechjobs.com/images/webreference.gif"/>Find a programming school near you</h5>
    </div>
    <div id="ssn_widget_content">
<form inert id="SSN" name="populate" action="https://www.webreference.com/school-search-results.html" method="get">
	 
	 <label>Zip Code:</label>
	  <input name="pc" type="text" maxlength="5" value="" style="display:block;float:left;" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />
	 <br/><br/> 
	 <label>Subject:</label>
	  <select name="sub">
		<option value="all">- Select All Subjects -</option>
				<optgroup label="Computers and Technology">
		<option value="compapplications">Computer Applications</option>
		<option value="comeng">Computer Engineering</option>
		<option value="comscience">Computer Science</option>
		<option value="cnp" selected="selected">Computer Prog. - Software Dev.</option>
		<option value="gameprogramming">Computer Game Programming</option>
		<option value="webdesign">Web Design</option>
		<option value="webdevelopment">Web Development</option>
		<option value="internetsystems">Internet Systems</option>
        <option value="internetcertification">Internet Certification</option>
        <option value="databasedesign">Database Design and Development</option>
        <option value="infosystemsmgmt">Information Systems Management</option>
        <option value="itprojectmgmt">Information Technology Project Management</option>
		<option value="networkdesign">Network Design - Development</option>
        <option value="systemsanalyst">Systems Analyst</option>
	  </select>
	  <br/><br/>  
	  <label>Degree:</label>
	  <select name="qual">
	   <option value="all" selected="selected">- Select All Degrees -</option>
		<option value="associate">Associate's</option>
		<option value="bachelor">Bachelor's</option>
		<option value="master">Master's</option>
		<option value="doctoral">Doctoral</option>
		<option value="certificate">Certificates</option>
		<option value="diploma">Diplomas</option>
		<option value="coursework">Coursework</option>
		<option value="mba">MBA</option>
	  </select>
	<br style="clear:both;"/><br/>  
	 <input name="ct" type="radio" value="online"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />Online
	  <input name="ct" type="radio" value="campus"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />Campus
	  <input name="ct" type="radio" value="either" checked="checked" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />Both
      
	  <br/><br/> 
	  <input type="submit" value="Submit"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />	
</form></div>
</div><div class="image square quad" style='margin-bottom:20px;'>
     
<script language="JavaScript">
	var t=displayDFPTag("imu");
	document.write(t);

</script>
</div>

<div class="articlecategorysummary">
    <iframe scrolling="no" frameborder="0" align="middle" src="https://webreference.com/sl/assetlisting/index2666.html?wsn=www.webreference.com&wpu=/js/column5/workaround.html&lurl=https://o1.qnsr.com/cgi/r?WT.qs_dlk=WkaWIgrIZ78AAAPBIQkAAAAF%20domain=None;;n=203;c=1395323;s=9530;x=7936;f=201308291521150;u=j;z=TIMESTAMP;k=https://assetform.webreference.com/controller&wpos=AssetListing&lyt=l9&mcss=https://www.webreference.com/imageserver/b2btechleadform/webreference/styles/style_email.css&css=https://www.webreference.com/hqb2b/css/qmp/qmp_default.css&title=Top%20White%20Papers%20and%20Webcasts" name="inneriframe" id="inneriframe" height="820px" width="340px;"></iframe>
</div>

</script>
</div>

</div>
        <div class="clear"></div>
        <div id="footer">
        <div id="footer_content">
    <div id="quad_bottom"class="quad" align='center' style='margin-left:auto;margin-right:auto;width:720px;'>
        
<script language="JavaScript">
	var t=displayDFPTag("lb");
	document.write(t);

</script>
    </div>
    <div class="footer_listing">
         
    </div>
    <div class="footer_listing">
        <span class="list-header">WebReference</span>
        <ul>
            <li class="first"><a href="../tips/index.html">Tip Archive</a></li>
            <li><a href="../../about.html">About</a></li>
            <li><a href="../../sitemap.html">Sitemap</a></li>
            <li><a href="../../contact.html">Contact</a></li>
            <li><a href="../../accountManagement87fb.html%3FformType=registrationForm.html">Subscribe</a></li>
        </ul>

</div>
    <div class="footer_listing">
        <span class="list-header">Topics</span>
        <ul>
            <li class="first"><a href="https://webreference.com/authoring.html">Web Authoring</a></li>
            <li><a href="../../internet/index.html">The Internet and the Web</a></li>
            <li><a href="../../multimedia/index.html">Multimedia</a></li>
            <li><a href="https://webreference.com/programming.html">Web Programming</a></li>
            <li><a href="../../promotion/index.html">Website Promotion and Marketing</a></li>
            <li><a href="../../experts/index.html">Contributors</a></li>
        </ul>
    </div>
    <div class="footer_listing">
        <span class="list-header"><a href="https://www.developer.com/"><img src="../../img/dev.com_logo.png" alt="Developer.com"></a></span>
        <ul>
            <li class="first"><a href="../../terms.html">Terms Of Service</a></li>
            <li><a href="../../licensing.html">Licensing and Permissions</a></li>
            <li><a href="../../privacy.html">Privacy Policy</a></li>
            <li><a href="../../mediakit/index.html">Advertising</a></li>
            <li><a href="https://e-newsletters.developer.com/">Newsletters</a></li>
            
        </ul>
    </div>    <div class="footer_listing">
         
    </div>
    <div class="clear"></div>
    <div id="copyright">
        Copyright © 2017 QuinStreet Inc. All Rights Reserved.
    </div>
</div>

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-48218803-1', 'auto');
    ga('send', 'pageview');

</script>

        </div>

<div id="ajax_alpha"></div>
		<div id="ajax_beta"></div>

</body>

</html>