<?php

include_once("../includes/config.inc.php");
$page_title = "Regular expressions";
$page_description = "What are regular expressions and how to use them";
$page_author = "Issayah Copsey";
include_once("../includes/header.inc.php");

?>

<main role="main" class="container">

	<!-- Beginning of blog post -->
	<div class="blog-post">
		<h2 class="blog-post-title">Regular Expressions</h2>
		<p class="blog-post-meta">October 21, 2020 by Issayah Copsey</p>

		<p>What are regular expressions and how are they used?</p>
		<br>
		<h3>What are regular expressions?</h3>
		<p>
			Regular expressions are patterns that can match a wide range of character combinations. This is especially
			important in input validation. By creating patterns that match all sorts of input, we, as programmers can
			limit
			and modify what the user enters.
			<br> This means by creating these patterns we can do things like, filter specific words -- especially
			explicit
			words, make sure they entered the correct things e.g. entered in a proper email address, watch for and
			correct
			simple mistakes such as adding two spaces by accident, etc.
			<br> JavaScript contains many different functions that use Regular Expressions such as exec(), test(),
			match(), replace(), and more.
			<br>Test and match are functions that allow us to see if the input matches the function. It is important to
			note
			that test() will return a Boolean, while match() returns an array of matching strings.
		</p>
		<h3>What do they look like and how to use them?</h3>
		<p>
			Regular expressions are a long topic and contain many different special characters that allow for specific
			combinations of characters and letters. So, for this, I will keep it simple and demonstrate a small set of
			common ones.
		</p>
		<p>
			It is important to clarify that there are different versions of Regular Expressions. Javascript uses
			ECMAScript
			v6, where PHP uses PCRE. Even Excel has a version of Regex [A common abbreviation for Regular Expressions]
			that it uses. The changes are typically very small
			but they have some small differences in them that change them from each other. All regex scripts are placed
			in between two slash marks: /REGEX/
		</p>
		<p>
			All special characters have very useful applications that allow special things to happen. It is important to
			note that all special characters must be escaped with a backslash e.g. "\d".
			<ol>
				<li>The character "d" represents any digit of 0-9, while capital "D" can represent any non-digit
					character.
				</li>
				<li>The "w" can represent any alphanumeric character, combining both if you are allowing for both
					numbers and characters, while not wanting any special characters to be used. 
					Capital W, like the capital D represents anything that is not alphanumeric. </li>
				<li>A single period . is special in that it breaks the "special characters must be escaped" rule, in
					that it usually can be placed alone, and represents ANY character,
					it can also be escaped for a \ to represent a literal period. </li>
				<li>Importantly, using the characters of +, *, and {} can designate how many repetitions each should
					have.
					The + allows the occurence to happen ONE or MANY times, while the * can allow for ZERO to MANY
					times.
					They are placed after whatever it is that you want to be repeated. The {digit} expresses a specific
					number of times. Or it can use used as {digit, digit} to express a range. </li>
				<li>The ? after a set expresses optionality. It states whether the thing placed after is optional and
					will execute whether it exists in the text. </li>
				<li>Lastly, everything can be put in () to expand the length of each special character. For example, you
					can state that (this) is optional in the text if you do (this)?. </li>
			</ol>
		</p>
		<p>
			Using these small sets of special characters, we can create a small script that allows us to test if an
			email is correctly written and should be executed.
		</p>
		<p>
			All an email needs are some alphanumeric characters, that can go on forever, and an @ symbol after those
			characters. Then, anything can come after the @ symbol because the domain names for their email can be
			anything.
		</p>
		<p>So to start, all we need to do is test for any characters expressed by: </p>
		<pre class="language-regex"><code>
/\w+/
Because we need any alphanumeric character and one to many times.
        </code></pre>
		<p>Second, we need to designate that there must be a @</p>
		<pre class="language-regex"><code>/\w+@/</code></pre>
		<p>After that we need to designate that there can be any text after the @.</p>
		<pre class="language-regex"><code>/\w+@.+/</code></pre>
		<p>Then we need to end with a '.' then some leftover text</p>
		<pre class="language-regex"><code>/\w+@.+\.\w+/</code></pre>
		<p>And we are done!</p>
		<p>This would be all you would need to add in a test statement to determine if it is an email. <br>Test returns
			a Boolean value of true or false so we can easily add a few if statements to the JavaScript! 
			Feel free to find the JS used in the inspector located at the bottom of the page.</p>
		<div class="box">
			<h2>Try me!</h2>
			<label for="email">Email:</label>
			<input type="text" id="email" name="email" onblur="this.placeholder= 'email'"
				onfocus="this.placeholder = ''" placeholder="email">
			<input type="submit" value="Submit" onclick="myFunction()">
			<p id="demo"></p>
		</div>
		<h1>Regular expressions concluded</h1>
		<p>Regular expressions themselves are not hard to make. Typically, you can use a "regex tester" such as one at
			<a target="_blank" href="https://regex101.com/">regex101.com</a> to test any code that you want, using all
			different flavors of regex. I have also found <a target="_blank"
				href="https://regexone.com/">regexone.com</a>
			as a great resource to learn from, and it shows many of the special characters on the side if you ever
			forget.
		</p>
		<p>Implementing them into your scripts can also seem daunting at first, but it all depends on how you intend to
			use
			the script. For testing if content is there, use test to return Boolean. If you are wanting to piece out
			certain parts of the input text use match. Refer to the <a target="_blank"
				href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp">MDN</a>
			for
			other specific ways to use regular expressions. Once you learn how to use them effectively, they can open a
			wide range of doors for input validation and correction.</p>

		<!-- End of blog post -->

</main>
<script>
	function myFunction() {
		let email = document.getElementById("email").value;
		let re = /\w+@.+\.\w+/;
		if (email) { //truthsy
			if (re.test(email)) { // because test returns Boolean values.
				document.getElementById("demo").innerHTML = "True"
			} else {
				document.getElementById("demo").innerHTML = "False"
			}
		} else { //falsy
			document.getElementById("demo").innerHTML = "You must enter something"
		}
	}
</script>
<?php

	include_once("../includes/footer.inc.php");

?>