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=""></a></textarea>
I want to change into this:
<textarea><a href=""></a></textarea>
Is there any basic solution for this matter?
EDIT: I forgot to mention that the first link () is not a static link. It will always be changing. So I'd need an ultimate solution.
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."></a></textarea>
I want to change into this:
<textarea><a href="http://www.stackoverflow."></a></textarea>
Is there any basic solution for this matter?
EDIT: I forgot to mention that the first link (http://www.google.) is not a static link. It will always be changing. So I'd need an ultimate solution.
Share Improve this question edited Jul 30, 2013 at 12:03 RadicalActi asked Jul 30, 2013 at 11:57 RadicalActiRadicalActi 1911 gold badge4 silver badges11 bronze badges 10- Have you considered using a regex? Do you know about content editable – MisterJ Commented Jul 30, 2013 at 12:01
- 1 @MisterJ regex is probably not the best solution here, and w3schools is a terrible resource. – John Dvorak Commented Jul 30, 2013 at 12:01
- 1 @MisterJ RegEx is (almost) never a good solution for HTML. Regular expressions can't parse HTML, because HTML is not a regular language. – Ken Bellows Commented Jul 30, 2013 at 12:04
- 1 @MisterJ The Mozilla Developer Network is my go to source rather than W3Schools. – Ken Bellows Commented Jul 30, 2013 at 12:05
-
1
@MisterJ developer.mozilla/en-US/docs/Web/HTML/Content_Editable . As for the specific w3schools page: the description is poor (what does "editable" mean?). They also claim
contenteditablewas added in HTML5. That's not exactly true. – John Dvorak Commented Jul 30, 2013 at 12:07
4 Answers
Reset to default 3This 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.");
}
</script>
</head>
<body>
<textarea><a href="http://www.google."></a></textarea>
</body>
</html>
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."></a></textarea>
jQuery:
$('div').html($('textarea').val());
$('div').find('a').attr('href', 'http://www.stackoverflow.');
$('textarea').val($('div').html());
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.";
var text = $('textarea').html();
$('textarea').html(text.replace(/(<a [^&]*href=['"])[^'"]*(['"][^&]*>)/, "\$1"+new_url+"\$2"));
See it in action here: http://jsfiddle/JaTAr/2/
This will look for anything in the textarea that has the pattern <a ...href='...'...> and replaces it with <a ...href='www.stackoverflow.'...>. So depending on your content, it may be fussy, but probably it will do what you want.
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."></a>';
$('textarea').empty().text(newTxt);
jsFiddle DEMO