Edit attribute value in an HTML string

Question

So, I've got a string. The string contains html. I'm checking the string for 'name', if it doesn't have one I'm using sneaking one in there if it does I need to change what it is.

var myString = '<input id="accountUser_c967817c993e62b1de50e4f0401a03ae" type="hidden" value="c967817c993e62b1de50e4f0401a03ae" name="addRow[]"><div class="colors goldbluegreenorange"></div>';
if (myString.indexOf('name') == -1) {
    myString = myString.substr(0,myString.indexOf('>')) + ' name="addRow[]"' + myString.substr(myString.indexOf('>'));
} else {
    //get what's inside name's quotes and change it to removeRow[]. 
}

I've got jquery going on too, if that makes more sense than straight javascript.

Not a great idea to name your variable string. Just saying. — Joseph Silber
– Joseph Silber, Commented Nov 16, 2012 at 16:47
oh, I see that now. it was just for example purposes. I didn't do it IRL. — davimusprime
– davimusprime, Commented Nov 16, 2012 at 16:52

Joseph Silber · Accepted Answer · 2012-11-16 18:01:54Z

2

Since you're using jQuery, why not create a jQuery element out of that string, so that we can use jQuery's beautiful API for this? It'll make it far less error-prone than raw string manipulation.

Here's some sample code:

var $element = $('<input id="accountUser_c967817c993e62b1de50e4f0401a03ae" type="hidden" value="c967817c993e62b1de50e4f0401a03ae" name="addRow[]"><div class="colors goldbluegreenorange"></div>');

$element.filter('input').prop('name', function(i, v) {
    return v ? 'removeRow[]' : 'addRow[]';
});

Note: the v in that function is the current value of the name attribute, which jQuery automatically passes in to the callback function. The return value is what the value of the attribute should be updated to.

Update: If you then want to convert it all back into a string, use this:

var theHTMLstring = $element.wrapAll('<div>').parent().html();

Here's the fiddle: http://jsfiddle.net/kBF3c/

edited Nov 16, 2012 at 18:01

answered Nov 16, 2012 at 16:49

Joseph Silber

221k59 gold badges369 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

davimusprime Over a year ago

I think I understand what's going on here. How do I stick that back into my first variable?

Joseph Silber Over a year ago

@davimusprime - Not sure what you're asking. Did you see me last update? What are you trying to accomplish? What are you gonna do with that string?

davimusprime Over a year ago

the string is actually coming from part of an array for managing some fancy table stuff, datatables.net. Also, I missed your update the first time :D

davimusprime Over a year ago

$element.wrap('<div>').parent().html(); is only returning the input (and not the div). That my bad?

Joseph Silber Over a year ago

@davimusprime - Nope. My bad. It should be wrapAll instead of just wrap. I updated my answer and added a fiddle.

Rory McCrossan · Accepted Answer · 2012-11-16 16:49:45Z

0

Try converting the string to a jQuery object and reading the parameter from that:

var myString = '<input id="accountUser_c967817c993e62b1de50e4f0401a03ae" type="hidden" value="c967817c993e62b1de50e4f0401a03ae" name="addRow[]"><div class="colors goldbluegreenorange"></div>';
var $input = $(myString).filter('input');
$input.attr('name') = ($input.attr('name') == "") ? 'addRow[]' : 'removeRow[]';

answered Nov 16, 2012 at 16:49

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

2 Comments

Rory McCrossan Over a year ago

Don't. You really shouldn't be dealing with HTML as a string. If you need to amend/append it use jQuery.

davimusprime Over a year ago

I have to use it as a string. It's actually a part of an array for datatables.net. I'm moving a row from one table to another but have to modify the input for the behind the scenes form submit.

Elias Van Ootegem · Accepted Answer · 2012-11-16 16:52:31Z

0

Since you're using jQuery anyways, why don't you just parse the string and treat the tags as HTML?

var html = $.parseXML(string);
$.each(html.find('*'),function()
{
    if ($(this).attr('name'))
    {
        $(this).attr('name', 'addRow[]');
    }
    else
    {
        $(this).attr('name','removeRow[]');
    }
});

And take things from there?

answered Nov 16, 2012 at 16:52

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

Comments

Bruno · Accepted Answer · 2012-11-16 17:05:28Z

0

Why don't you just use jQuery's inbuilt functionality.

Demo here

// specify string representing input element
var str = '<input id="accountUser_c967817c993e62b1de50e4f0401a03ae" type="hidden" value="c967817c993e62b1de50e4f0401a03ae" name="addRow[]"><div class="colors goldbluegreenorange"></div>';

var els = $(str);
// create element
var el = $(els).filter("input");

if( $(el).prop("name") ) {
    $(el).prop( "name", "removeRow[]" );
} else {
    $(el).prop("name", "anynameyouwant");
}

I am guessing you need to add the the above elements to the DOM which you can do like so

$("#parentId").append( els );

edited Nov 16, 2012 at 17:05

answered Nov 16, 2012 at 16:49

Bruno

5,8222 gold badges29 silver badges44 bronze badges

Comments

The Alpha · Accepted Answer · 2012-11-16 17:11:37Z

0

You may try this

var str = '<input id="accountUser_c967817c993e62b1de50e4f0401a03ae" type="hidden" value="c967817c993e62b1de50e4f0401a03ae" name="addRow[]"><div class="colors goldbluegreenorange"></div>';
$(str).prop('name', (!$(str).prop('name') ? "addRow[]" : "removeRow[]"));
str=$('<div/>').html(obj).html(); // str contains new value

DEMO.

answered Nov 16, 2012 at 17:11

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Collectives™ on Stack Overflow

Edit attribute value in an HTML string

5 Answers 5

5 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related