<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Gabriel Jones &#187; regexp</title>
	<atom:link href="http://gabrieljones.com/category/regexp/feed/" rel="self" type="application/rss+xml" />
	<link>http://gabrieljones.com</link>
	<description>Web Developer Weblog</description>
	<lastBuildDate>Fri, 29 Jul 2011 13:27:49 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Working With Regular Expressions in JavaScript</title>
		<link>http://gabrieljones.com/working-with-regular-expressions-in-javascript/</link>
		<comments>http://gabrieljones.com/working-with-regular-expressions-in-javascript/#comments</comments>
		<pubDate>Mon, 23 Oct 2006 02:18:34 +0000</pubDate>
		<dc:creator>Gabriel</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[regexp]]></category>

		<guid isPermaLink="false">http://gabrieljones.com/?p=11</guid>
		<description><![CDATA[Defining Regular Expression Patterns:
The most common way to define a regexp pattern is to define a variable instance with a pattern you want to match, along with any modifiers you wish to use. This can be achieved with the following:

1
var pattern = new RegExp&#40;&#34;yourpattern&#34;, &#91;&#34;g&#34;&#124;&#34;gi&#34;&#124;&#34;i&#34;&#124;&#34;x&#34;&#93;&#41;;

Understand that the second parameter is just an example, and not [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Defining Regular Expression Patterns</strong>:</p>
<p>The most common way to define a regexp pattern is to define a variable instance with a pattern you want to match, along with any modifiers you wish to use. This can be achieved with the following:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> pattern <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;yourpattern&quot;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;g&quot;</span><span style="color: #339933;">|</span><span style="color: #3366CC;">&quot;gi&quot;</span><span style="color: #339933;">|</span><span style="color: #3366CC;">&quot;i&quot;</span><span style="color: #339933;">|</span><span style="color: #3366CC;">&quot;x&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Understand that the second parameter is just an example, and not to be applied to all your patterns.</p>
<p><strong>Understanding Modifiers</strong>:</p>
<p>Modifiers are parameters that a newly instantiated RegExp class use to define how to parse a particular pattern from its string. The most common modifiers used are <strong><em>g</em></strong>, <strong><em>i</em></strong>, <strong><em>m</em></strong>, <strong><em>x</em></strong>, <strong><em>U</em></strong>, and a combination of <strong><em>g</em></strong>, and <strong><em>i</em></strong>.</p>
<p><strong>g</strong> means Global Match, <strong>i</strong> means Case Insensitive, <strong>m</strong> means Multiple Lines, <strong>x</strong> means  Allow Comments and White Space in pattern, and <strong>U</strong> means Ungreedy pattern.</p>
<p>For example, if you wish to match <em>foo</em> in a large document that contained words like <em>Foo</em>, <em>foo</em>, and <em>foobar</em>, you would apply the following pattern:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> pattern <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;foo&quot;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;g&quot;</span><span style="color: #339933;">|</span><span style="color: #3366CC;">&quot;gi&quot;</span><span style="color: #339933;">|</span><span style="color: #3366CC;">&quot;i&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Modifiers can also be applied with the string you wish to match, like <em>/foo/g</em> or <em>/\s/g</em></p>
<p><strong>Handling Regular Expression Methods</strong>:</p>
<p>There are seven definitive methods most commonly used when handling RexExp and String classes.  Writing the pattern is only half the battle, knowing how to use them is the desired end game.</p>
<p><em>RegExp</em>.<strong>exec</strong>(string) will apply the RegExp to a string and return an array of matches.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> exec<span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/foo/i</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;foo foofighter Foo foobar&quot;</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p><em>RegExp</em>.<strong>compile</strong> will take a non literal notation pattern, and compile it to RegExp native for faster execution. No example needed as this method is not used very often.</p>
<p><em>RegExp</em>.<strong>test</strong>(string) will return <em>true</em> if the given string matches the RegExp pattern, returns <em>false</em> if not</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> test <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/foobar/</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Foo bar foo Bar&quot;</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p><em>String</em>.<strong>match</strong>(pattern) will match the string with the given pattern.  If the modifier <strong>g</strong> is applied, it will return an array of matches. If not applied, it will either return the first match, or <em>null</em> for no matches.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> match <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;Foobar is a foofighter, foo&quot;</span>.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/(foo)(oo+)/g</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p><em>String</em>.<strong>search</strong>(pattern) will return the numeric beginning of the index of the matched pattern, will return -1 if no match is found.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> search <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;Apples and oranges are not foos and bars&quot;</span>.<span style="color: #660066;">search</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/foos/</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p><em>String</em>.<strong>replace</strong>(pattern, string) will find the matched pattern and replace it with the supplied string, and returns the newly formed string.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;Foobar is the big foobar.&quot;</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/foobar/gi</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;apples&quot;</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p><em>String</em>.<strong>split</strong>(pattern) splits the string into an array, splitting at the matched pattern.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> split <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;Foo bar is a great word&quot;</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\s/g</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p><strong>Backreferences</strong>:</p>
<p>Simple put, backreferences are references to the same variable in a previously successful match. \<em>n</em> where <em>n</em> is any positive nonzero integer telling the engine which successful match to reference. The following code will match any html tag:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> tags <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&amp;lt;(\S+).*&amp;gt;(.*)&amp;lt;\/\1&amp;gt;/</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p><strong>Character Sets</strong>:</p>
<p>Character sets match any of the contained characters, and can be written in ranges.  Examples of acceptable patterns are:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> halfchars <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/a-l/</span><span style="color: #009900;">&#41;</span>
<span style="color: #003366; font-weight: bold;">var</span> allnums <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/0-9/</span><span style="color: #009900;">&#41;</span>
<span style="color: #003366; font-weight: bold;">var</span> allcharsnonums <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/^0-9/</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p><strong>Quantifiers</strong>:</p>
<p>Quantifiers match the preceding subpattern <code>n</code> number of times. Acceptable subpatterns include, single characters, escaped sequences, patterns enclosed in parentheses, and character sets.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> matches <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/o{1,2}/</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Foobar foofighting toooo many times with the Fockers&quot;</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p><strong>Example Regular Expression Patterns</strong>:</p>
<p>Trimming whitespace from the beginning and end of a string would look like the following:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> trim <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/^[ \s]+|[ \s]+$/</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p>Validating an IP address would use the following pattern to capture the group of numbers between each [ . ].</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> vip <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\b(?:\d{1,3}\.){3}\d{1,3}\b/</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p>Matching a date would look like the following</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> date <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/(\d{1,2}\/\d{1,2}\/\d{4})/</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p>The following pattern loosely validates email addresses:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> email <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\w@(a-zA-Z_]+?.[a-zA-Z]{2,6}/</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://gabrieljones.com/working-with-regular-expressions-in-javascript/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
	</channel>
</rss>

