{"id":179,"date":"2016-05-07T14:45:57","date_gmt":"2016-05-07T14:45:57","guid":{"rendered":"http:\/\/punjabirevolution.com\/?page_id=179"},"modified":"2016-07-22T12:49:27","modified_gmt":"2016-07-22T12:49:27","slug":"punjabi-revolution-tutorial-javascript-regular-expression-part-2","status":"publish","type":"page","link":"http:\/\/punjabirevolution.com\/index.php\/punjabi-revolution-tutorial-javascript-regular-expression-part-2\/","title":{"rendered":"punjabi revolution tutorial Javascript regular expression part 2"},"content":{"rendered":"<p><iframe loading=\"lazy\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/zd-V92KdFLo?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>It is in continuity to the previous video. Here we make the regular expression little more expressive. Below is the complete code.<\/p>\n<pre class=\"lang:default decode:true\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;script&gt;\r\nfunction validate()\r\n\t{\r\n\t\tvar val = document.getElementById(\"x\").value;\r\n\t\tvar re = \/^[0-9]{5}-[0-9]{7}-[0-9]{1}$\/;\r\n\t\tif(val.search(re) == -1)\r\n\t\t\tdocument.getElementById(\"msg\").innerHTML = \"&lt;font color='red'&gt;invalid&lt;\/font&gt;\";\r\n\t\telse\r\n\t\t\tdocument.getElementById(\"msg\").innerHTML = \"&lt;font color='green'&gt;valid&lt;\/font&gt;\";\r\n\t}\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;input type=\"text\" id=\"x\" \/&gt; &lt;span id=\"msg\"&gt;&lt;\/span&gt;\r\n\r\n &lt;br&gt;\r\n&lt;input type=\"button\" value=\"test\" onclick=\"validate();\" \/&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Line 7: It is regular expression pattern&nbsp;\/^[0-9]{5}-[0-9]{7}-[0-9]{1}$\/ which means<\/p>\n<ul>\n<li>^ in start means, the pattern matching would start from the beginning and $ means, the pattern matching start from the end. Here both are applied, means, the pattern matching would start simultaneously, both from beginning and end. In simple words, it means that both the contents and the length of the input should match with the regular expression pattern.<\/li>\n<li>[], the square brackets are used to show the allowed range of characters. [0-9] means only digits are allowed. if we write as [A-Z], it would mean only upper letters are allowed and [a-z] would mean only small letters allowed. [A-Za-z] would mean, both upper case and lower case alphabets are allowed. Instead of range, we can also write it mentioning the complete list if letters like [ABVFR] means only ABVFR are allowed alphabets, any other alphabets would be rejected.<\/li>\n<li>{} the curly brackets specify the frequency of the previous letter. for instance, [VCD]{4} means, only VCD are permissible letters and the word should contain exactly 4 letters. for example VVVV, VCDV, CVDC are few valid examples.<\/li>\n<li>Now, lets revisit the above pattern, it says,\n<ul>\n<li>There should be 5 digits then a hash then 7 digits then &nbsp;a hash and then 1 digit. no other input is permissible.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Lets take an other scenario. Suppose the input should contain a valid number plate of motor vehicles. The accepted format is &nbsp;three capital alphabets , then hash and then five digits. According to the aforementioned rules, the pattern for such regular expression would be<\/p>\n<p>\/^[A-Z]{3}-[0-9]{5}$\/ Below is the complete code.<\/p>\n<pre class=\"lang:default decode:true \">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;script&gt;\r\nfunction validate()\r\n\t{\r\n\t\tvar val = document.getElementById(\"x\").value;\r\n\t\tvar re = \/^[A-Z]{3}-[0-9]{5}$\/;\r\n\t\tif(val.search(re) == -1)\r\n\t\t\tdocument.getElementById(\"msg\").innerHTML = \"&lt;font color='red'&gt;invalid&lt;\/font&gt;\";\r\n\t\telse\r\n\t\t\tdocument.getElementById(\"msg\").innerHTML = \"&lt;font color='green'&gt;valid&lt;\/font&gt;\";\r\n\t}\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;input type=\"text\" id=\"x\" \/&gt; &lt;span id=\"msg\"&gt;&lt;\/span&gt;\r\n\r\n &lt;br&gt;\r\n&lt;input type=\"button\" value=\"test\" onclick=\"validate();\" \/&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>There are also some short codes to specify the permission character range. like \\d means digits only which is equal to [0-9]. so we can also write the above expressions as<\/p>\n<p>\/^\\d{5}-\\d{7}-\\d{1}$\/;<\/p>\n<p>\/^[A-Z]{3}-\\d{5}$\/<\/p>\n<p>Below are few short codes for different scenarios.<\/p>\n<figure id=\"attachment_558\" aria-describedby=\"caption-attachment-558\" style=\"width: 300px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/punjabirevolution.com\/wp-content\/uploads\/2016\/05\/short-codes-for-regular-expressions.png\"><img loading=\"lazy\" class=\"size-medium wp-image-558\" src=\"http:\/\/punjabirevolution.com\/wp-content\/uploads\/2016\/05\/short-codes-for-regular-expressions-300x226.png\" alt=\"short codes for regular expressions\" width=\"300\" height=\"226\" srcset=\"http:\/\/punjabirevolution.com\/wp-content\/uploads\/2016\/05\/short-codes-for-regular-expressions-300x226.png 300w, http:\/\/punjabirevolution.com\/wp-content\/uploads\/2016\/05\/short-codes-for-regular-expressions.png 607w\" sizes=\"(max-width: 300px) 85vw, 300px\"\/><\/a><figcaption id=\"caption-attachment-558\" class=\"wp-caption-text\">short codes for regular expressions<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Try the code and verify the result. Should you have any question, please write in below comments area.<\/p>\n<p>Cheers &#128578;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It is in continuity to the previous video. Here we make the regular expression little more expressive. Below is the complete code. &lt;html&gt; &lt;head&gt; &lt;script&gt; function validate() { var val = document.getElementById(&#8220;x&#8221;).value; var re = \/^[0-9]{5}-[0-9]{7}-[0-9]{1}$\/; if(val.search(re) == -1) document.getElementById(&#8220;msg&#8221;).innerHTML = &#8220;&lt;font color=&#8217;red&#8217;&gt;invalid&lt;\/font&gt;&#8221;; else document.getElementById(&#8220;msg&#8221;).innerHTML = &#8220;&lt;font color=&#8217;green&#8217;&gt;valid&lt;\/font&gt;&#8221;; } &lt;\/script&gt; &lt;\/head&gt; &lt;body&gt; &lt;input type=&#8221;text&#8221; id=&#8221;x&#8221; &hellip; <a href=\"http:\/\/punjabirevolution.com\/index.php\/punjabi-revolution-tutorial-javascript-regular-expression-part-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;punjabi revolution tutorial Javascript regular expression part 2&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"http:\/\/punjabirevolution.com\/index.php\/wp-json\/wp\/v2\/pages\/179"}],"collection":[{"href":"http:\/\/punjabirevolution.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/punjabirevolution.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/punjabirevolution.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/punjabirevolution.com\/index.php\/wp-json\/wp\/v2\/comments?post=179"}],"version-history":[{"count":5,"href":"http:\/\/punjabirevolution.com\/index.php\/wp-json\/wp\/v2\/pages\/179\/revisions"}],"predecessor-version":[{"id":559,"href":"http:\/\/punjabirevolution.com\/index.php\/wp-json\/wp\/v2\/pages\/179\/revisions\/559"}],"wp:attachment":[{"href":"http:\/\/punjabirevolution.com\/index.php\/wp-json\/wp\/v2\/media?parent=179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}