jQuery selector value escaping

Question

I have a dropdown list that contains a series of options:

<select id=SomeDropdown>
  <option value="a'b]&lt;p>">a'b]&lt;p></option>
  <option value="easy">easy</option>
<select>

Notice that the option value/text contains some nasty stuff:

• single quotes
• closing square bracket
• escaped html

I need to remove the a'b]<p> option but I'm having no luck writing the selector. Neither:

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

or

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

are returning the option.

What is the correct way to escape values when using the "value=" selector?

Answer 1

I use this function to escape jquery selectors. It escapes basically everything questionable but may be too aggressive.

function escapeStr(str) 
{
    if (str)
        return str.replace(/([ #;?%&,.+*~\':"!^$[\]()=>|\/@])/g,'\\$1');      

    return str;
}

Answer 2

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.

Answer 3

use .filter() with a custom function. txt should contain your nasty string, or you could just replace indexOf with any other function you choose.

$("#SomeDropdown option")
   .filter(function(i){
       return $(this).attr("value").indexOf(txt) != -1;
   })
   .remove();

Answer 4

I find that you can use \ \ to escape selectors. Think of it as one \ for the regex and one to escape from the regex.

Example:

$(this).find('input[name=user\\[1\\]\\[name\\]]').val();

Answer 5

If you are trying to do the escaping programmatically, you only need one set of slashes. This won't work:

var key = 'user[1][name]';
$(this).find('select[name=' + key + ']');

But this will:

var key = 'user\[1\]\[name\]';
$(this).find('select[name=' + key + ']');

And so will this:

$(this).find('select[name=user\\[1\\]\\[name\\]]');

You can use this javascript to build a correctly escaped selector:

if(key.indexOf('[') !== -1) {
    key = key.replace(/([\[\]])/g, "\\$1");
}

Here's a JS Fiddle that shows some of the weird behavior:

http://jsfiddle.net/dH3cV/

Answer 6

jQuery.escapeSelector() was introduced in jQuery 3. To match the option with value a'b]<p> in the question, you could use:

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

In general, using jQuery.escapeSelector() is good practice for things like $('#' + $.escapeSelector(id)), where variable id may contain special CSS symbols.

Answer 7

The problem is due to HTML entities; the "<" is seen by the browser as "<".

The same could be said for the example provided by bobince; please note that the following does not work with jQuery 1.32 on Win + FF3:

var select= document.getElementById('SomeDropdown');
for (var i= select.options.length; i-->0;) {
    if (select.options[i].value=="a'b]<p>") {
        alert('found it');
    }   
}

However, changing the entity to a literal will indeed find the desired value:

var select= document.getElementById('SomeDropdown');
for (var i= select.options.length; i-->0;) {
    if (select.options[i].value=="a'b]<p>") {
        alert('found it');
    }   
}

Of course, there is a problem here, as the value that you're specifying is not the exact value that you're looking for. This can also be corrected with the addition of a helper function:

function html_entity_decode(str) {
    var decoder = document.createElement('textarea');
    decoder.innerHTML = str;
    return decoder.value;
}

All together now:

var srcValue = html_entity_decode("a'b]<p>");
var select= document.getElementById('SomeDropdown');
for (var i= select.options.length; i-->0;) {
    if (select.options[i].value == srcValue) {
        alert('found it');
    }   
}

Any now, the input value that you're searching for exactly matches the value of the select element.

This can also be written using jQuery methods:

var srcValue = html_entity_decode("a'b]<p>");
$($('#SomeDropdown').attr('options')).each(function() {
    if (this.value == srcValue)
    {
        $(this).remove();
    }
});

And then finally, as a plugin since they are so easy to make:

jQuery.fn.removeByValue = function( val )
{
    var decoder = document.createElement('textarea');
    decoder.innerHTML = val;    
    var srcValue = decoder.value;

    $( $(this)[0].options ).each(function() {
        if (this.value == srcValue) {
            $(this).remove();
        }
    });

    return this;
};

$('#SomeDropdown').removeByValue("a'b]<p>");

Answer 8

jQuery's forum has a nice solution for this:

https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/

This slightly modified version of what they suggest is also nullsafe.

function jqid (id) {
  return (!id) ? null : '#' + id.replace(/(:|\.|\[|\]|,)/g, '\\$1');
}

Answer 9

Safely escaping CSS string is not easy and can't be done with simple regex.

You can use CSS.escape() .

this is not supported by all browsers but a polyfill exist.