Select element id with special character in it with jquery/javascript

Question

I have a jsp that contains a number of diffenent elements ids. Example:

<div id="divName">
...
  <tr id="tr_0_123/45">
    <input type="hidden" name="field_0_123/45" value="NAME_Field" id="field_0_123/45">
  </tr>
</div>

The problem is that I need to be able to read the value field from my input. To do so I use

function workOnValue(){
  var idTr = 'tr_0_123/45';
  var idName = 'field_0_123/45';
  ${"#divName #"+idTr +" input[id='"+idName+"']).each(function(){
        do something...
  }
}

When I run this code the JQuery does not find any input with that id, meanwhile with any other kind of id that does not include the character / it does. I tried $.escapeSelector but my jQuery version is too old to work with it. I tried to use idName.replace("/","\\/"); or .replace(/[|#\\\/]/g, '\\$&');

Do you have any suggestions?

https://stackoverflow.com/questions/2786538/need-to-escape-a-special-character-in-a-jquery-selector-string — epascarello, May 20 '20 at 14:14
Does this answer your question? [How do I select an element with special characters in the ID?](https://stackoverflow.com/questions/44900544/how-do-i-select-an-element-with-special-characters-in-the-id) — Heretic Monkey, Oct 14 '21 at 20:17

score 0 · Answer 1 · answered May 20 '20 at 13:38

0

Well if you just want to escape the / you can replace idName with idName.replace("/", "\/"), but also in the HTML itself there is no closing " at the end of the ID definition, so the actual ID name itself is perhaps cut off with the /, as "s aren't necessary for IDs with no spaces, and supposedly, with no slashes either.

So just add a closing " to the ID of the inputs.

Another thing though is if you're selecting by ID, there's no reason to select the parent node's ID, since every ID is unique. You can change all of the code to either ${"input[id='"+idName+"']) or ${"#divName input") or ${"#" + idTr +"input"), if you only have 1 input type that u want to select in the elements.

answered May 20 '20 at 13:38

i tried with replace("/","\/") too but nothing. Also sorry for the formatting but in the actual code there are no errors such as missing ", it was my mistake while writing the question here. About the parent's id i need those for other reason but the all work just fine, except with the special character / – Fabzheimer May 20 '20 at 14:01
@Fabzheimer I noticed the TR has a `/` character in its ID too, does that reference on its own not work, or is the problem only with the input ID? – May 20 '20 at 14:04
the problem is with all id that have / in it. – Fabzheimer May 20 '20 at 14:24
@Fabzheimer there is a related question which mentions possible double escaping https://stackoverflow.com/questions/27255591/using-forward-slash-as-id-attribute but just try a simple recreation page, very basic HTML that only contains one element with an ID that has a slash in it, then try to reference it with document.getElementById, if that works, then you know its possible, so try again with the query selector, try vanilla javascript, just for testing `
` – May 20 '20 at 14:26
I've tried it and the result was that querySelector is not a valid selector, also the getElementById returned
– Fabzheimer May 20 '20 at 14:47
@Fabzheimer OK so we're getting somewhere, its just a question of the query selector one. So try `document.querySelector("#hi\/there")` or `document.querySelector("#hi\//there")` or `document.querySelector("div[id='hi/there']")` and see if any work – May 20 '20 at 14:50
wait I made some discoveries too. If i manually write the id of the field like: [code]field_0_123\\/45[code] this works, it gets the value. So i need to find a way to replace the / with \\/ in a way that sticks since replace doesn't seem to do the trick – Fabzheimer May 20 '20 at 14:54
@Fabzheimer are you sure that works with jQuery though ? – May 20 '20 at 14:57
so... with $("#divResult #tr_0_123/45 input[id='filed_0_123/45']").each(function(){} does not work, but with a simple var a = $('#field_0_123/45').val(); yes, it does... – Fabzheimer May 20 '20 at 15:15
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/214271/discussion-between-fabzheimer-and-just-me). – Fabzheimer May 20 '20 at 15:24

PeterKA · Answer 2 · 2020-05-20T14:49:22.143

Your HTML is malformed; a tr should be in a tbody or thead which is in a table. Also content in a tr should be inside a td or a th. Please see the output of console.log( $tr[0] ); in the demos below.

You can select the input element directly using it's id; the id attribute is unique - if it's not, then your HTML would still be malformed after you correct the table HTML. You can use $('[id="id-value"]') to select by id. The two demos demonstrate that you'll correctly select the input element whether or not the table html is malformed. See output of console.log( $input ); below.

$tr = $('[id="tr_0_123/45"]');
$input = $('[id="field_0_123/45"]');
console.log( $tr[0] );
console.log( $input.val() );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divName">
...
  <tr id="tr_0_123/45">
    <td><input type="hidden" name="field_0_123/45" value="NAME_Field" id="field_0_123/45"></td>
  </tr>
</div>

$tr = $('[id="tr_0_123/45"]');
$input = $('[id="field_0_123/45"]');
console.log( $tr[0] );
console.log( $input.val() );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divName">
...
<table>
  <tbody>
  <tr id="tr_0_123/45">
    <td><input type="hidden" name="field_0_123/45" value="NAME_Field" id="field_0_123/45"></td>
  </tr>
  </tbody>
</table>
</div>

NOTE

If you have access to the JSP page generating the IDs please edit it to remove special characters.
If the IDs of the input elements are not unique - the fact that you're using .each() implies so, edit the JSP page to make them unique or change the id attribute to a class attribute instead.

References

Thank you for the answer @PeterKA. First thing first, this is not the actual html structure but thanks for the correction there. Also, i tried $input = $('[id="field_0_123/45"]'); but the answer is still undefined. — Fabzheimer, May 20 '20 at 14:19
Please create a minimum demo showing `$input = $('[id="field_0_123/45"]');` as `undefined` and we'll be happy to take a look. — PeterKA, May 20 '20 at 14:42

Select element id with special character in it with jquery/javascript

2 Answers2