Regex replace for jquery selects

Question

I'm trying to target some dynamic form variables using jquery. Only problem is that they contain square brackets (they're array format) and I can't seem to get the regex to work that would correctly find and then replace the string with the correct formatting for jquery.

Demo code :

<div id="test[array][1]">wibble</div>
<div id="test[array][2]">wibble</div>
<div id="test[array][3]">WIBBLE</div>
<div id="test[array][4]">WIBBLE</div>
<button onclick="clicky();">test</button>

<script>

function clicky() {
//1 fail
$("#test[array][1]").html("moo");

//2 works
element = "#test\\[array\\]\\[2\\]";
console.log(element);
$(element).html("moo");

//3 fail
element = "#test[array][3]";

element.replace(/\[/g, "\\[");
element.replace(/\[/g, "\\]");
$(element).html("moo");  
console.log(element);

//4 fail     
element = "#test[array][4]";     

element.replace(/\[.*?\]/g,'\\$1');
console.log(element);

 $(element).html("moo");


};    

</script>

Array[2] is working but I need to be able to convert a randomly generated string into a version thats acceptable for jQuery. It also confuses me as console.log shows the element with only 1 backslash.

Im passing in a string eg '#test[array][1]' and need to get that into a format which jQuery will accept as an identifier.

Any pointers would be greatly appreciated!

It would be interesting to see what effect it has on the performance, but you could use the selector [id='test[array][1]'] instead — My Head Hurts
– My Head Hurts, Commented Jan 3, 2013 at 14:52

Stefan · Accepted Answer · 2013-01-03 14:46:52Z

1

You can still use the old document.getElementById function and then convert it to a jQuery element if needed.

Sample:

$('#clicky').click(function() {    
var element = document.getElementById("test[array][1]");
$(element).html('moo');    
});   

<div id="test[array][1]">wibble</div>
<div id="test[array][2]">wibble</div>
<div id="test[array][3]">WIBBLE</div>
<div id="test[array][4]">WIBBLE</div>
<button id="clicky">test</button>

Fiddler: http://jsfiddle.net/tatzz/2/

answered Jan 3, 2013 at 14:46

Stefan

15k17 gold badges92 silver badges155 bronze badges

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

2 Comments

Doug McK Over a year ago

Thanks, that does the trick. +1 for avoiding regular expressions too!

geedubb Over a year ago

yep, ignore the framework and revert back to 'good old' javascript

geedubb · Accepted Answer · 2013-01-03 14:57:45Z

0

You could try this to do your string replacement...

element = "#test[array][3]";
element = element.replace(/\[/g, "\\\\[");
element = element.replace(/\]/g, "\\\\]");
$(element).html("moo");  
console.log(element);

You need to assign the result of the replace back to the variable.

edited Jan 3, 2013 at 14:57

answered Jan 3, 2013 at 14:49

geedubb

4,0574 gold badges29 silver badges38 bronze badges

Collectives™ on Stack Overflow

Regex replace for jquery selects

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related