3

Is there a way to automatically escape characters in a jQuery variable? My variable looks like this:

var $name = $(this).prev().attr('name');

Things get hairy now because the name has square brackets. So when I try to do this:

$('input:radio[name='+$name+']').next().addClass('so_pretty');

javascript throws a fit because it gets confused from all the brackets.

Anyway to add those escape slashes on the fly?

Thanks, Leo

RealityDysfunction
  • 2,609
  • 3
  • 26
  • 53

1 Answers1

6

Wrap it in quotes, so that meta char issue doesn't happen since [, ] are metachars for a jquery selector.

$('input:radio[name="'+$name+'"]').next().addClass('so_pretty');
                    ^__       ^___
PSL
  • 123,204
  • 21
  • 253
  • 243
  • What happens if the name contains a `"`? This works for the presented problem, but is not a general-solution for guarding truly arbitrary attribute filters. – user2864740 Oct 16 '13 at 22:35
  • @user2864740 in a generic manner you can prefix them with double slash using a regex replace. Not just for `"` for all meta chars. – PSL Oct 16 '13 at 22:37
  • It seems like there ought to be some existing function that would be suitable for this :> – user2864740 Oct 16 '13 at 22:39
  • @user2864740 there are numerous answer on that you can look up. Here is one.. http://stackoverflow.com/questions/2786538/need-to-escape-a-special-character-in-a-jquery-selector-string – PSL Oct 16 '13 at 22:43
  • 3
    @user2864740 - This IS a general solution for arbitrary attribute filters, because double quotes are never allowed in an attribute token. – Steve Oct 16 '13 at 22:49
  • @Steve Double quotes *can* appear in the *value* of an attribute (which is being checked here) - the markup merely initially assigns the *value* which exists in the DOM. For instance, `` and `` are valid constructs in HTML which will result in the attribute of the DOM element having a *value* of `foo"bar` which contains a double quote character. `$(..)` only runs against the DOM, not the initial markup. – user2864740 Oct 16 '13 at 23:10
  • @user2864740 - I don't think you are correct... it might display as `"` when you output it (console, alert, etc.) but internally it keeps the escaped string. This fiddle seems to confirm that PSL's solution works correctly, even with an escaped string: http://jsfiddle.net/Qc33K/ – Steve Oct 16 '13 at 23:28
  • @Steve The DOM and the HTML are different. The DOM does not internally store the escaped string - it internally stores a string which needs no escaping. Escaping is for markup and human consumption. Compare with http://jsfiddle.net/Qc33K/4/ which shows an *invalid selector*. While it still magically finds the correct element, this is *blind luck and/or a quirk of the sizzle selector engine and is undefined behavior*. – user2864740 Oct 17 '13 at 05:37
  • @Steve Also consider that http://jsfiddle.net/Qc33K/5/ breaks sizzle for good - quite literally, *kaboom* (with an Exception thrown). On the other hand, I was expecting http://jsfiddle.net/Qc33K/11/ to work, but alas it does not work in sizzle. (Changing the `"`s to `'`s works, but then how to escape the quote, whatever it may be? A generally solution must work with any quote for any valid *value*.) – user2864740 Oct 17 '13 at 06:02