Highlight all links in a string of text
In this guide we will be using javaScript and plain HTML.
The skill level of this guide is very medium. So if you are new to HTML and javaScript? Then I suggest that you do some reading at w3schools.com or any other website, book or media about HTML and javaScript
Step 1. Setting up our html
First of all we need to make a markup that can handle our little “Test site”
<html>
<head>
<title>highlight links</title>
</head>
<body>
<div id="contentHolder"></div>
<table id="form">
<tr>
<td valign="top">
<span>Text input</span>
</td>
<td>
<textarea id="txtaText" cols="83" rows="10"></textarea>
</td>
</tr>
<tr>
<td align="right" colspan="2">
<input type="button" value="Show text" name="btnShowText" onclick="showText()" />
</td>
</tr>
</table>
</body>
</html>
Above we have our markup, with a textarea and a button for submitting some text and a container for our text (a span tag).
This should be easy to understand! (: So let’s move on to the funny part Our javaScript!
Step 2. Our javaScript
First of all we need a regular expression for locating our links. We put this expression in a variable for later use. Be aware that this will only find .dk and . com websites. You can change that by adding endings here (\.dk|\.com).
var regExpString = "(http?://)?(www\.[^ ]*(\.dk|\.com)(/[^ ]*)?)";
Now we need a function that can take the text from our textarea and insert it intu our container, while searching for links using our regular expression.
function showText() {
var reglinks = new RegExp(regExpString, "g");
var contentHolder = document.getElementById("contentHolder");
var txtaText = document.getElementById("txtaText");
contentHolder.innerHTML = txtaText.value.replace(reglinks, "<a alt=\"_blank\" href=\"http://$2\">$2</a>");
}
-
First create a variable that holds a new instance of the RegExp function. Then feed it our regular expression from above and set the mode to global.
-
Now create a variable containing the HTML element that will work as our container for the output.
-
And now just a final variable, containing the content of our textarea.
Our 3 variables gives us the possibility to
-
Get the text of our textarea.
-
Search through our textarea and find all of its links.
-
And finally send our text back to our container, using the variable holding our container.
-
BUT! Before we insert our text to our container, we first need to replace every link found by our RexExp function. Then replace them with an actual <a>Link</a>
This is what our last line of code is for.
-
We set our container.innerHTML to be = the value of our textarea. But at the value of our textarea we use a RegExp function called ‘replace’ to replace all links with a actual <a>Blink</a>.
-
First we feed the replace function with our regular expression
-
Then we use these ‘$’. Those can give us access to parts of what our RegExp function finds among our text and inserts that in a HTML <a/> tag.
-
we use ‘$2’ because we want to get the value from inside the second pair of outer brackets of our regular expression.
DONE!
If everything works, then you should now have a fully working example of how to capture all links in a string of text. (:
Did you find the RegExp har to understand? Then you can read more about them here
--> www.javascriptkit.com
Don’t forget to post a comment bellow ;)
And if you have any questions, then use the comment section as well.