jquery escape square brackets to select element

Question

Consider a input element

<input id="meta[152][value]" type="text" />

Here the input field is dynamically generated. I need to select that field. So I used,

alert($('#meta[152][value]').val());

But this seems to be invalid. After searching I found, that the "square brackets" need to be escaped like #meta\\[152\\]\\[value\\]

So how to do that ? I currently use this code,

var id = "#meta[152][value]" // (I get this value by another method) I need the escaping to be done here. So that i can use as

/** I need the value of id to be escaped using regex,replace or any other method to get #meta\[152\]\[value\] and not manually **/

alert($(id).val());

Your suggestions will be helpful !

possible duplicate of [What is the difference between these different ways to escape square brackets inside jQuery selectors](http://stackoverflow.com/questions/18573178/what-is-the-difference-between-these-different-ways-to-escape-square-brackets-in) — Rikard, Sep 23 '13 at 17:54

Rion Williams · Accepted Answer · 2011-12-08T16:23:20.420

8

The following should work:

alert($('#meta\[152\]\[value\]').val());

or

var id = "#meta\[152\]\[value\]";
alert($(id).val());

Working Example

Conversion Function:

function ConvertValue(id)
{
    var test = id.replace(/[[]/g,'\\\\[');
    return "#" + test.replace(/]/g,'\\\\]'); 
}

Conversion Example

edited Dec 08 '11 at 16:23

answered Dec 06 '11 at 17:25

Rion Williams

74,820
37
200
327

thanks for the try.. but i just gave id = "#meta[152][value]" as an example and i cannot directly change it . It need to be changed using regex or replace – Aakash Chakravarthy Dec 06 '11 at 17:28
Aakash, I added a conversion function to convert your id value into the value that you would need to use a selector. Let me know if this works for you – Rion Williams Dec 06 '11 at 18:51
Updated the function and added an Example, hope this helps. You should be able to pass the id into it and it should return the proper selector for you. – Rion Williams Dec 06 '11 at 19:01
when i use the return value, i cannot select the element !! what will be the reason ? http://jsfiddle.net/vaakash/KqvMM/3/ – Aakash Chakravarthy Dec 08 '11 at 15:35
If you use the return function that returns '#YourTestValue', then to select that using jQuery you could simply take that return value and place it in a selector, as such : $("#YourTestValue") to select that element – Rion Williams Dec 08 '11 at 15:37
Did that, but not working, see the demo here http://jsfiddle.net/vaakash/KqvMM/3/ – Aakash Chakravarthy Dec 08 '11 at 15:41
but not able to get the value !! after selecting the element !! sorry for too many questions – Aakash Chakravarthy Dec 08 '11 at 15:52
Hmm - that is strange. I'm not sure why that is happening. I'll look into it some more. – Rion Williams Dec 08 '11 at 15:54
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/5693/discussion-between-aakash-chakravarthy-and-rionmonster) – Aakash Chakravarthy Dec 08 '11 at 16:13

score 6 · Answer 2 · answered Dec 06 '11 at 17:26

6

If you feel more comfortable without escaping you also use the attributes selector and search for the element with that id like this: $("[id='meta[152][value]']")

answered Dec 06 '11 at 17:26

amosrivera

26,114
9
67
76

score 3 · Answer 3 · answered Dec 06 '11 at 17:28

3

The simplest way is just to use the regular getElementById, which requires no escaping:

document.getElementById("meta[152][value]").value;

answered Dec 06 '11 at 17:28

Dennis

32,200
11
64
79

1

And don't forget to a) remove the leading hash (#) b) add the trailing .value – Tim Lovell-Smith Mar 28 '13 at 00:16

score 1 · Answer 4 · answered Dec 06 '11 at 17:27

1

this shoudl work for you, you almost had it:

    $(document).ready(function() {
       var id = "#meta\\[152\\]\\[value\\]";
        alert($(id).val()); 
    });

answered Dec 06 '11 at 17:27

Ian Jamieson

4,376
2
35
55

score 0 · Answer 5 · answered Nov 05 '18 at 13:55

You can use the _.escapeRegExp method from the Lodash library.

console.log($('#' + _.escapeRegExp('meta[152][value]')).val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<input id="meta[152][value]" type="text" value='Test' />

score 0 · Answer 6 · answered Dec 06 '11 at 17:23

0

Um, just put the escaped value right in your string.

var id = "#meta\\[152\\]\\[value\\]";

See it working here

answered Dec 06 '11 at 17:23

idrumgood

4,904
19
29

thanks for the try.. but i just gave id = "#meta[152][value]" as an example and i cannot directly change it . It need to be changed using regex or replace – Aakash Chakravarthy Dec 06 '11 at 17:28

jquery escape square brackets to select element

6 Answers6

Linked