How to replace a href link within a Textarea with jQuery

Question

I have a basic questions with jQuery.

I acutally want to change the "a" tag within a Textarea. I know that "a" tags aren't functioning within a textarea so I can not target them using jQuery selectors.

Example:

<textarea><a href="http://www.google.com"></a></textarea>

I want to change into this:

<textarea><a href="http://www.stackoverflow.com"></a></textarea>

Is there any basic solution for this matter?

EDIT: I forgot to mention that the first link (http://www.google.com) is not a static link. It will always be changing. So I'd need an ultimate solution.

Have you considered using a regex? Do you know about [content editable](http://www.w3schools.com/tags/att_global_contenteditable.asp) — MisterJ, Jul 30 '13 at 12:01
@MisterJ regex is probably not the best solution here, and w3schools is a terrible resource. — John Dvorak, Jul 30 '13 at 12:01
@JanDvorak What would you recommend as resource which is better than w3schools? (for the matter here, which is content editable, I think my link is ok..) — MisterJ, Jul 30 '13 at 12:03
@MisterJ RegEx is (almost) never a good solution for HTML. [Regular expressions can't parse HTML](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags), because HTML is not a regular language. — Ken Bellows, Jul 30 '13 at 12:04
@MisterJ The [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_Editable) is my go to source rather than W3Schools. — Ken Bellows, Jul 30 '13 at 12:05
@MisterJ https://developer.mozilla.org/en-US/docs/Web/HTML/Content_Editable . As for the specific w3schools page: the description is poor (what does "editable" mean?). They also claim `contenteditable` was added in HTML5. That's not exactly true. — John Dvorak, Jul 30 '13 at 12:07
@KenB Keep in mind that he's not trying to find a RegEx for HTML code, but rather a link. — Thew, Jul 30 '13 at 12:09
Any solution guys? It would also be cool if I can change the full "a" tag part. Is there any method to select that "a" tag? — RadicalActi, Jul 30 '13 at 12:09
@RadicalActi Can you guarantee that the link within the `href` is the only thing in the textarea that looks like a URL? — Ken Bellows, Jul 30 '13 at 12:10
@KenB Atually there will be an image there as well. Like: `<a class="external-link" href="http://www.google.com"><img/></a>` — RadicalActi, Jul 30 '13 at 12:12

Tom · Answer 1 · 2013-07-30T12:25:33.170

3

This is an example; after loading the href will get replaced:

<!DOCTYPE html>
<html>
    <head>
        <script>
                window.onload = function () {
                    var textarea = document.getElementsByTagName("textarea")[0];
                    textarea.innerHTML = 
                        textarea.innerHTML.replace(
                            /href=".*"/, 
                            "http://www.stackoverflow.com");
                }
        </script>
    </head>
    <body>
         <textarea><a href="http://www.google.com"></a></textarea>
    </body>
</html>

edited Jul 30 '13 at 12:25

answered Jul 30 '13 at 12:02

Tom

4,096
2
24
38

This will replace more than just link URLs. Can you do better? – John Dvorak Jul 30 '13 at 12:03
EDIT: I forgot to mention that the first link (http://www.google.com) is not a static link. It will always be changing. So I'd need an ultimate solution. – RadicalActi Jul 30 '13 at 12:04
well; maybe with a regex. – Tom Jul 30 '13 at 12:06
There you go; it will replace any url in that textarea – Tom Jul 30 '13 at 12:11
That's a complicated regex. Can't you match on the `href="` part and then assume everything up to the next `"` is the URL? – nnnnnn Jul 30 '13 at 12:13
You could do that too. – Tom Jul 30 '13 at 12:16
There you go; it will replace /href=".*"/ with href="http://www.stackoverflow.com" – Tom Jul 30 '13 at 12:21

score 2 · Answer 2 · answered Jul 30 '13 at 12:15

2

What if you were to get the content of the textarea, put it inside an invisible div, use jquery selectors inside the div to make your changes, and then re-fill the textarea with the new content.

HTML:

<div style="display:none;"></div>
<textarea><a href="http://www.google.com"></a></textarea>

jQuery:

$('div').html($('textarea').val());
$('div').find('a').attr('href', 'http://www.stackoverflow.com');
$('textarea').val($('div').html());

answered Jul 30 '13 at 12:15

MonkeyZeus

20,375
4
36
77

please note however that this executes any script that's inside the textarea. That's not exactly desired. – John Dvorak Jul 30 '13 at 12:17

score 1 · Answer 3 · answered Jul 30 '13 at 12:24

var txt = $('textarea').text();
var ancStart = txt.toString().indexOf('<a');
var ancEnd = txt.toString().indexOf('a>') + 2;
var sl = (ancStart * -1) + ancEnd;
var newTxt = txt.slice(sl);
newTxt += '<a href="http://www.stackoverflow.com"></a>';
$('textarea').empty().text(newTxt);

jsFiddle DEMO

score 1 · Accepted Answer · answered Jul 30 '13 at 12:29

Using a quickly slapped together Regular Expression to act on all link-like patterns in the textarea, this will probably do what you want, though without more context it's tough to tell for sure:

var new_url = "www.stackoverflow.com";
var text = $('textarea').html();
$('textarea').html(text.replace(/(&lt;a [^&]*href=['"])[^'"]*(['"][^&]*&gt;)/, "\$1"+new_url+"\$2"));

See it in action here: http://jsfiddle.net/JaTAr/2/

This will look for anything in the textarea that has the pattern <a ...href='...'...> and replaces it with <a ...href='www.stackoverflow.com'...>. So depending on your content, it may be fussy, but probably it will do what you want.

Why would that matter? set `new_url` to whatever value you want. — Ken Bellows, Jul 30 '13 at 12:31

How to replace a href link within a Textarea with jQuery

4 Answers4