Need to Escape a Special Character in a Jquery Selector String

Need to escape a special character in a jQuery selector string

If you want something that works with any sort of value, try this:

var val = $(this).attr('val').replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, "\\\\$&")

This works by escaping all CSS meta-characters listed on the Selectors page of the jQuery documentation with two backslashes.

Keep in mind that in your situation, there is no need to do something tricky like this. You can use the filter function to select all option elements with a given value without having to escape the value, as described in Mathias Bynens's answer.

How to escape ~ character in jQuery selector

You can escape ~ with \\

alert( $('#QR\\~QID345').text() );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="QR~QID345">Hello</div>

jQuery Escaping Special Characters Fails

You just need enough backslashes :)

ID:
The ID of the element is test_E\\/\\/\\/_AAAAA. Note that backslashes don't have any special meaning in HTML, so there really are six backslashes in the ID.

jQuery selector: Backslashes, forward slashes, and several other characters have special meaning in jQuery selectors, so we need to escape them with a backslash. The selector therefore needs to be #test_E\\\\\/\\\\\/\\\\\/_AAAAA. This tells jQuery to look for an element whose ID contains test_E, then two backslashes, then one forward slash, and so on.

JavaScript string literal: To represent that selector using a JavaScript string literal, each backslash needs to be escaped. So the string literal would be "#test_E\\\\\\\\\\/\\\\\\\\\\/\\\\\\\\\\/_AAAAA".

var selectionString = "#test_E\\\\\\\\\\/\\\\\\\\\\/\\\\\\\\\\/_AAAAA";snippet.log("actual id: " + $("p")[0].id);snippet.log("selection string given to jQuery: " + selectionString);snippet.log("text: " + $(selectionString).text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144 --><script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<p id="test_E\\/\\/\\/_AAAAA">This is a test :)</p>

jQuery selector value escaping

I don't think you can. It should be:

#SomeDropdown >option[value='a\'b]<p>']

And this does work as a CSS selector (in modern browsers). Expressed in a JavaScript string literal you would naturally need another round of escaping:

$("#SomeDropdown >option[value='a\\'b]<p>']")

But this doesn't work in jQuery because its selector parser is not completely standards-compliant. It uses this regex to parse the value part of an [attr=value] condition:

(['"]*)(.*?)\3|)\s*\]

\3 being the group containing the opening quotes, which weirdly are allowed to be multiple opening quotes, or no opening quotes at all. The .*? then can parse any character, including quotes until it hits the first ‘]’ character, ending the match. There is no provision for backslash-escaping CSS special characters, so you can't match an arbitrary string value in jQuery.

(Once again, regex parsers lose.)

But the good news is you don't have to rely on jQuery selectors; there are perfectly good DOM methods you can use, in particular HTMLSelectElement.options:

var select= document.getElementById('SomeDropdown');
for (var i= select.options.length; i-->0;) {
    if (select.options[i].value=="a'b]<p>") {
        // do something with option
}   }

This is many times simpler and faster than asking jQuery to laboriously parse and implement your selector, and you can use any value string you like without having to worry about escaping special characters.

Escaping special characters not working for jQuery selector

Change

string = string.replace(re, escapeRegExp('\\') + matchList[i]);

to

string = string.replace(re, '\\' + matchList[i]);

and

$('.test-' + formatted).text('testing');

to

$('.' + formatted).text('testing');

Edit: Check squint's comment up there for a simpler way of achieving what you want. :)

How do I escape special characters in jquery

Class names can't have spaces; if an html element has a class attribute like this:

<p class="foo bar">

that means it has two classes (foo and bar). You could select the above element in jQuery by doing

$(".foo.bar")

jquery escaping special charatcers while looping items in select

I think I have a solution for you. What I do is reduce your selArray into a string using Array.join, and then the special characters are escaped with backslashes (as is the convention for regular expressions) using String.replace, and then use a regular expression to check if it matches the value of the current select element in question.

See my code:

selArray=['option (1)']$('#sel option').each(function(){  var test = selArray.join('|').replace(/\(|\)/gi, '\\$&')  var re = new RegExp(test, 'i')  if(re.test($(this).val())) $('#sel option[value="' + $(this).val() + '"]').remove()  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script><select name="sel" id="sel"><option value="opt100">opt100</option><option value="option (1)">option (1)</option><option value="33">opt33</option></select>

---

Related Topics