How do I add an attribute to a link inside a textarea?

Question

Here is my code:

HTML

<textarea id="text"><a href="/" id="link">Click here</a></textarea>

<a href="#" id="add_attr">Add attribute</a>
<a href="#" id="remove_attr">Remove attribute</a>

JavaScript, JQuery

$(document).ready(function()
{
    $('#add_attr').click(function()
    {
        var value = $('#text').val();

        //add attribute `class="name"` to the link inside the textarea
        return false;
    });

    $('#remove_attr').click(function()
    {
        var value = $('#text').val();

        //remove attribute `class="name"` from the link inside the textarea
        return false;
    });
 });

Links in a `textarea` are not part of the DOM. They are just text. http://jsfiddle.net/9pT7a/ — George Cummins, Jul 15 '11 at 19:07
That's why I was surprised by the answers below. But can't I just grab the text and then I dunno ..somehow add those attributes to the text? — , Jul 15 '11 at 19:11
basically get the textarea value and do some search/replace. — Sinan, Jul 15 '11 at 19:13
You can parse and replace the contents of the textarea. But I think this would require the use of a regex, and [parsing HTML with a regex is not a good idea](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags). — George Cummins, Jul 15 '11 at 19:14
@Phil: Answers that are wrong should be downvoted. That's how the site works. — George Cummins, Jul 15 '11 at 19:15
@Phil: and btw, I didn't downvote them ;) but I guess I agree with @George — , Jul 15 '11 at 19:17

score 1 · Accepted Answer · answered Jul 15 '11 at 19:11

1

$('body').append('<div style="display: none;" id="hCreator">' + $('#text').val() + '</div>');
$('#hCreator a').attr('senad', 'senad');
$('#text').val($('#hCreator').html());
$('#hCreator').remove();

answered Jul 15 '11 at 19:11

Senad Meškin

13,597
4
37
55

1

Note that will break if the value contains an unmatched ``, and may change other bits of the text too, depending on the browser and the specific text (e.g. it might normalize tag soup, change entity references to literal characters or vice versa, or the like). – Anomie Jul 15 '11 at 19:14
This is the only answer that addresses the fact that he's modifying the *contents of a `textarea`*, not the DOM. – hughes Jul 15 '11 at 19:16
This is just a technique, not a full solution. – AlienWebguy Jul 15 '11 at 19:28

AlienWebguy · Answer 2 · 2011-07-15T19:40:37.493

0

This works:

$(document).ready(function()
{
    $('#add_attr').click(function()
    {
        var value = '<div>' + $('#text').val() + '</div>';
        _value = $(value);
        _value.find('a').addClass('name');
        _value = _value.contents();
        $('#text').val($('<div>').append(_value.clone()).remove().html());
        return false;
    });

    $('#remove_attr').click(function()
    {
        var value = '<div>' + $('#text').val() + '</div>';
        _value = $(value);
        _value.find('a').removeClass('name');
        _value = _value.contents();
        $('#text').val($('<div>').append(_value.clone()).remove().html());
        return false;
    });
 });

Working demo: http://jsfiddle.net/qWG7M/2/

edited Jul 15 '11 at 19:40

answered Jul 15 '11 at 19:24

AlienWebguy

76,997
17
122
145

That adds the class to every "top-level" tag in the text, not just the one link. – Anomie Jul 15 '11 at 19:36
Updated before I saw your comment :) – AlienWebguy Jul 15 '11 at 19:41

score -1 · Answer 3 · answered Jul 15 '11 at 19:05

-1

$('textarea#text a#add_attr').addClass('name');

answered Jul 15 '11 at 19:05

Phil

10,948
17
69
101

score -1 · Answer 4 · answered Jul 15 '11 at 19:06

-1

$("#text a").attr("yourattr","Val");

answered Jul 15 '11 at 19:06

Kevin Bowersox

93,289
19
159
189

How do I add an attribute to a link inside a textarea?

4 Answers4