Please refer back to part 1 to go through setting up the bare bones.
In this part we will setup the script that can chang.values entered in and touch upon Regular Expressions or Regex. Regex is a fairly advanced topic and many experienced programmers struggle with it, while at first it may look like line noise it is in fac.very logical an.very powerful.
first off, let's make the button call a function. In the file from the previous tutorial I put in an onClick attribute on the button? after that put in a call to a function, let's say changeMe();
now let's make the function between the <script> blocks:
function changeMe(){alert( document.getElementById("myTag").value);}
This will make an alert box come up with the string inside the box. We can also set th.value:
function changeMe(){ document.getElementById("myTag").value = "HELLO WORLD";}
This will change th.value of the box to HELLO WORLD.
now for some regex fun. Let's do a useful example, Say we want this tool to secure any insecure creatives. What we need to do is change any http: to https: for any items brought in. To do this we first have to look for http:, the forward slashes you will see are what defines this as a regex
/http:/ - this is good, but what happens if we don't want to change the http in the links? we need only change the src="http:
/src="http:/ - This may be a little too strict, as there are many ways of putting this in. For instance the user may use double quotes or single quotes
/src=["']http:/ - the square brackets represent a character class - it means match any chacter inside. We will go deeper in to these in other how tos, but how about spaces around the equals sign?
/src\S*=\S*["']http:/ - the \S represents a whitespace and * represent 0 or more of the previous character. now I will make a couple of changes we will need later
/(src\S*=\S*['"]http):/gi - The brackets store the result of the match that we will need when replacing th.value, as we need to know whether to replace with a double or single quote, to make this pull everything up to where the s is though I have placed the brackets around most of the string. also I put g and i afterwards which are flags. The g means global, so for all instances - not just the first and i means ignore case.
now lets put this as the function:
function changeMe(){ document.getElementById("myTag").value = document.getElementById("myTag").value.replace(/(src\S*=\S*['"]http):/gi,"$1s:");}
the replace function takes the regex as the first argument and the string to replace it with as the second argument. The $1 part in the string is replaced byt what is matched in the first set of brackets.
now we are replacing the src=, but flash files also have data= o.value=. To fix this we could chain our regex replaces together like:
function changeMe(){ document.getElementById("myTag").value = document.getElementById("myTag").value.replace(/(src\S*=\S*['"]http):/gi,"$1s:").replace(/(data\S*=\S*['"]http):/gi,"$1s:").replace(/(value\S*=\S*['"]http):/gi,"$1s:");}
or we could use the regex OR, which is a pipe | and group them together. So it becomes (src|value|data). The function then becomes:
function changeMe(){ document.getElementById("myTag").value = document.getElementById("myTag").value.replace(/(src|value|data\S*=\S*['"]http):/gi,"$1s:");}
and that's it! what I would recommend is creating a new button and assigning this - and then we can play in different functions on different buttons
end result code:
<html>
<head>
<script>
function changeMe(){ document.getElementById("myTag").value = document.getElementById("myTag").value.replace(/((src|value|data)\S*=\S*['"]http):/gi,"$1s:");}
</script>
</head>
<body>
<form name="theForm">
<textarea rows=20 cols=20 name="myTag" id="myTag"></textarea><br>
<input type="button.value="go" onClick="changeMe();">
</form>
</body>
</html>
Subscribe to:
Post Comments (Atom)
Posts
No comments:
Post a Comment