Return matches of both the URL and the Link Text

[bautistajuan071]

Hi All,
How could i return matches of both the URL and the Link Text? if possible. If you know of a function that will do this, please point me to it.
My script returns works fine convertig URLs but i don't have the function to detect hyperlinks.
Any help will be greatly appreciated

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
	var breaks = [];
	var replaceWordChars = function(text) {
		var s = text;
		// spaces
		s = s.replace(/[\u02DC|\u00A0]/g, "");		
		return s;
	}
	function replaceURLWithHTMLLinks(text) {
		var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
		return text.replace(exp,'<a href="$1">$1</a>'); 
	}	
	$(document).ready(function(){
         $("#input").bind("keypress keyup", function() {
          breaks = $("#input").val().split(/[\r\n]+/g);
           $("#storage").html("");
           $.each(breaks,function(e){
              $("#storage").append("<p>" + breaks[e] + "</p>\n");
           });
              $("#output").val(replaceURLWithHTMLLinks(replaceWordChars($("#storage").html().replace(/[\n]$/,""))));
          });
	});
</script>
<form name="subform">
  <textarea id="input" name="oldText" cols="120" rows="30" wrap="virtual"></textarea>
  <br />
  <textarea id="output" name="newCode" cols="120" rows="30" wrap="virtual"></textarea>                
  <div id="storage" style="display:none"></div>
</form>

[jscheuer1]

When you say "detect hyperlink" what do you mean? Do you mean you want to detect <a> (anchor) tags? I saved and ran your code, it seems to get a little confused if I paste into the top textarea - say:

<p><a href="https://www.google.com">https://www.google.com</a></p>

I get it, it's not expecting that. But what's the purpose? It's perfectly good at converting:

https://www.google.com

to the above (first code snippet). What else exactly do you want it to do? You cannot account for everything. People can potentially paste whatever they want into the top area. What I think you want is a sort of editor, that way people can choose what the output for any given input and/or segment of input is. That's actually much more complex than what you have, though it has been thoroughly discussed elsewhere (I can probably dig up the link to that, if that's the way you want to go). But there are already a number of javascript and/or server side editors available if that's what you want, in most cases using one that already exists would be a better choice than reinventing the wheel.

Or - maybe you just need another input textarea. The first can be for the url, the second could optionally be for the hyperlink text. If used it would replace the text representation of the url, if not, that (the text representation of the url) could remain.

Ultimately though, there seems no apparent purpose in any of this. That's not saying there is none, just that it's not clear to me.

If you want more help, please state as clearly as possible what the ultimate purpose of this exercise is.

[bautistajuan071]

Hi jscheeuer1,
Sorry should have exlained more.
I need to learn more in how to build a simple javascript editor.
I need a javascript/regex pattern for finding microsoft word document links and convert to html links.
My editor already converts to paragraphs and finds http://dynamicdrive.com and convert to links,
but it doesn't have the functionallity to convert a link "Click here" which in the background there is a link that should output <a href://http://dynamicdrive.com>Click here</a>
Let me know if you have more questions please and thanks again for your help.

[jscheuer1]

I'm not familiar with Microsoft Word document format for links. And using Google, all I'm getting is how to use Word to make links, nothing on what they would look like in the raw document, if that's what you're talking about.

How about you show me on two lines:

first: the input text

second: how you want it formatted

Then, if it's possible/I can figure it out, I can tell you how to do it.

[bautistajuan071]

Hi,

Sorry that I haven't respond but i got busy with work. Now, I do have time to continue playing with the script and whenever you get a chance too.

Here is an example:
a) In one input field user will enter text as the one below:
Click here to visit Dynamic Drive site
(i.e. Dynamic Drive text will be highlighted carrying the link in the background just as return key, p tags for paragraphs, and anything else that the script might have)

b) Second field should output <a href://http://dynamicdrive.com>Dynamic Drive</a> as html

Do you think this is possible?

Thanks so much for your help and let me know if you have any questions plz

JB

[jscheuer1]

Still don't get what you mean. As far as I know you cannot input that to a textarea. Any information conveying a url would have to be literal upon input to a textarea. So, unless I misunderstood what you meant by:

Click here to visit Dynamic Drive site

which in itself conveys no url information AND in a textarea can convey no hidden url information, I see no way this can be done with textarea.

Is it possible you mean the person would be literally inputting:

Click here to visit <a href="http://www.dynamicdrive.com/">Dynamic Drive</a> site

?

[bautistajuan071]

I found this website that it does what i have in mind.
http://wordtohtml.net

Example test:

"Welcome to Dynamic Drive, the #1 place on the net to obtain free, original DHTML & Javascripts to enhance your web site!"

[jscheuer1]

That's (on the left) a contenteditable enabled body element in an iframe, not a textarea. There's no re in the world that will allow you to get non-existent info from a textarea. Now why that works, what you linked to, in simplest terms, is that you are pasting html elements into an element that is set to accept that as content. Because of that, javascript can then read and act upon that content. However, to have it all work out as they do, it's pretty complicated. And it only works because, when you copy the example text, modern browsers coupled with moder operating systems accept all of the hidden information (links, fonts, font-weight, etc.) just in case where you are later going to paste it is capable of accepting some or all of that.

What you have, on the other hand is a textarea element. It can only accept literal text.

You could try doing what they do in a more limited form or perhaps even try using just a contentedible div element because your goals may be less ambitious. However, if you want a full blown editor like that, there are several around, many are free.

[bautistajuan071]

- John,

I like the idea of using a contenteditable div element, since my ambition is limited for now. How can we proceed with this new approach ?

[jscheuer1]

Here's a basic contenteditable div on a basic page:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#input {
	width: 500px;
	height: 400px;
	border: 1px solid black;
}
</style>
</head>
<body>
<div id="input" contenteditable></div>
</body>
</html>

You can paste/type whatever into it, then later get its current content via javascript using:

document.getElementById('input').innerHTML

That will be a string you can parse with re or whatever string methods you want to employ.

You can also query the document tree of the element for information like (for instance):

document.getElementById('input').getElementsByTagName('a').length

to determine if and how many links are currently in there, then loop through those, getting thier innerHTML, href, etc. For example:

var atags = document.getElementById('input').getElementsByTagName('a'), atag = 0, hrefs = [], html = [], thetag;
while((thetag = atags[atag++])){
	hrefs.push(thetag.href);
	html.push(thetag.innerHTML);
}

You can also, if you want, cancel the div's editable status via:

document.getElementById('input').removeAttribute('contenteditable');

and reestablish it with:

document.getElementById('input').setAttribute('contenteditable', true);

Exactly what use you make of all this (you might not need nearly all of it) is up to you, you seemed to be doing pretty well with what you had already, were just getting stuck on how to accept hidden information (like links) on paste as input. This will solve that. It will also import any other tags and attributes. For instance, when pasting your demo line into the above div, I got this innerHTML (line breaks added for clarity):

<span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; 
background-color: rgb(250, 250, 250);">Welcome to&nbsp;</span><a href="http://www.dynamicdrive.com/" target="_blank" 
style="color: rgb(31, 76, 185); text-decoration: none; font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; 
background-color: rgb(250, 250, 250);">Dynamic Drive</a><span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, Tahoma, 
Calibri, Geneva, sans-serif; font-size: 13px; background-color: rgb(250, 250, 250);">, the #1 place on the net to obtain free, original 
DHTML &amp; Javascripts to enhance your web site!</span><div><span style="color: rgb(51, 51, 51); font-family: Verdana, Arial, 
Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; background-color: rgb(250, 250, 250);"><br></span></div>

If you have any other questions feel free to ask.