Javascript for loop to find urls in string and change links?

Question

I searched far and wide to answer my question, but everything seems very complicated. I am new to Javascript and I would like to help with this question, instead of someone just answering it (if you feel the need to give a direct answer, the breakdown will be wonderful).

I have a function that outputs a string from an HTML text area. I need to look for a string for any links, therefore, looking for "www". or "http: //". Then I need to go through this part to the end of the link (or a space will appear). This must be saved as a variable, and then "<a href = newVar>" must be placed at the beginning, then together with the new variable after that, and then ending with the </a> tag.

A string can have many URLs.

I have to do it like a for loop.

I have a starter code, but I'm super stuck! Any help is much appreciated!

 //Checking for URL in the message string function checkLink(text) { for (var i=0; i == text.length; i++) { var currentChar = text.charAt(i); if(text.charAt(i) == "w" && text.charAt(i+1) == "w" && text.charAt(i + 2) == "w" && text.charAt(i + 3) == ".") { //Not to sure what to do here } } } 

Answer 1

Regular expressions are by far the best way to do this. But, since this is for educational purposes, here is a method for finding URLs in strings. This is not the right answer, but shows concepts.

Let's say you have this text below:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus dui nec est auctor auctor. Nullam vulputate, augue non auctor rhoncus, urna urna tempus velit, non tincidunt nibh orci et elit. Integer sed nibh massa, eget vestibulum velit. www.Nulla.com at elit vitae massa egestas accumsan ac semper nisl. Curabitur viverra lorem at urna porttitor sit amet aliquam sapien http://imperdiet.org . Pellentesque Scholars of the Sagittis of Malleswad. Mauris lobortis aliquam felis sit amet vestibule. In the biography of faucibus lectus. Donec consectetur ante nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse Potenti.

There are two links here. The code is as follows.

Somehow get the text in a variable, which we will call text .

 var text = '<that text above>'; 

Now we will split the text into an array called words .

 var words = text.split(' '); 

In this example, we will create new output, so we need a string variable to store it.

 var new_text = ''; 

You seem to understand loops, but this is exactly what most loops passing through an array look.

 for (var i=0; i < words.length; i++) { var word = words[i]; 

We check whether the beginning of this "word" (which refers to each section of the text, separated by spaces, in this context) contains any of our prefixes. In fact, bit.ly is a valid URL. Regular expressions have better control over this than we do.

  if (word.indexOf('http://') === 0 || word.indexOf('www.') === 0) { 

We change the meaning of the word by putting the syntax of the links. I used Markdown, but you can do HTML or whatever.

  word = '[A LINK]' + '(' + word + ')'; } 

This is our conclusion, which we talked about at the top of the script. Just keep adding things to it, no matter how they were changed or not. The problem with this may be 1, or 94 spaces after our word, but we always return one. Regular expressions have functionality to handle this better.

  new_text += word + ' '; } 

new_text now looks like this.

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus dui nec est auctor auctor. Nullam vulputate, augue non auctor rhoncus, urna urna tempus velit, non tincidunt nibh orci et elit. Integer sed nibh massa, eget vestibulum velit. [A LINK](www.Nulla.com) in elit vitae massa egestas accumsan ac semper nisl. Curabitur viverra lorem in urna porttitor sit amet aliquam sapien [A LINK](http://imperdiet.org.) Pellentesque ultricies sagittis malesuada. Mauris lobortis aliquam felis sit amet vestibulum. In vitae faucibus lectus. Donec consectetur ante nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. 

which on stack overflow looks like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus dui nec est auctor auctor. Nullam vulputate, augue non auctor rhoncus, urna urna tempus velit, non tincidunt nibh orci et elit. Integer sed nibh massa, eget vestibulum velit. LINK in the elite vitae massa egestas accumsan ac semper nisl. Curabitur viverra lorem in urna porttitor sit amet aliquam sapien A LINK Pellentesque ultricies sagittis malesuada. Mauris lobortis aliquam felis sit amet vestibulum. In vita faucibus lectus. Donec consectetur ante nisi. Lorem ipsum dolor sits amet, consectetur adipiscing elit. Suspendisse potenti.

Pay attention to the problem? The split method was seen at http://imperdiet.org . 'as a url. What the user had in mind was that " http://imperdiet.org " be the URL and have a period after it. Regular expressions also avoid this.

The demo has all the code without my comment between them.

demonstration

If you want to know about regular expressions, I recommend this site .

Answer 2

I suggest repeating every word, broken by spaces.

 //split string by any space characters textarea.value.split(/\s/).reduce(function (prev, cur) { //word starts with http; convert to link if (cur.indexOf('http') === 0) { cur = '<a href="' + cur + '">' + cur + '</a>'; } //word starts with www; convert to http://+link else if (cur.indexOf('www') === 0) { cur = '<a href="http://' + cur + '">' + cur + '</a>'; } //append space to display properly return prev + cur + ' '; }, ''); 

This solution is not perfect, because the exact space is not saved, and it looks just http , not https?:// , but I will leave it to you to find out these problems.

http://jsfiddle.net/98gMb/