How to escape ":"?

Question

for example I have id like

someform:somepanel:somebutton

When I do jQuery("#someform:somepanel:somebutton") it returns someform, how to AUTOMATICALLY escape that id?

EDIT:

I want to do something like this

jQuery(somefunction("#someform:somepanel:somebutton"))

Answer 1

If it's only this very specialized version, you can just .replace() the character.

function somefunction(selector) {
    return selector.replace(/:/, '\\\\:');
}

jQuery(somefunction("#someform:somepanel:somebutton"))

is then converted into

jQuery("#someform\\:somepanel\\:somebutton");

To have a more generic version, you can use a regexp:

function somefunction(selector) {
    return selector.replace(/(!|"|#|\$|%|\'|\(|\)|\*|\+|\,|\.|\/|\:|\;|\?|@)/g, function($1, $2) {
        return "\\\\" + $2;
    });
}

Answer 2

use the double backslashes:

 jQuery("#someform\\:somepanel\\:somebutton")

Related:

• jQuery selector value escaping
• When do I need to escape metacharectars? (jQuery Selectors)

• http://api.jquery.com/category/selectors/

  • If you wish to use any of the meta-characters ( such as !"#$%&'()*+,./:;?@[\]^{|}~ ) as a literal part of a name, you must escape the character with two backslashes: \\. For example, if you have an an element with id="foo.bar", you can use the selector $("#foo\\.bar"). The W3C CSS specification contains the complete set of rules regarding valid CSS selectors.

---

Update #1

After your comment in regards to auto escaping the best method I see is to create a function within the string object like so

String.prototype.escape = function()
{
    return this.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/])/g,'\\$1')
}

you can also specifically define a function for the colons like so:

String.prototype.escape_colon = function()
{
     return this.replace(/:/,'\\$1')
}

and use like so:

jQuery("someform:somepanel:somebutton".escape())

but this will cause issues on pseudo selectors such as:

jQuery("someform:somepanel:somebutton:first".escape())

the :first selector will be escaped and therefore you will not find your element.

but y our best bet will be to build a string parser within the prototype to replace where it finds a specific set of chars such as:

jQuery("someform(_e(:))somepanel(_e(:))somebutton:first".escape())

this way you can define what you want to escape, but if that was the case you may as well escape them yourself.

Answer 3

Try:

jQuery("#someform\\:somepanel\\:somebutton")

Answer 4

If you use PrimeFaces, they have a handy helper function to do just that:

escapeClientId(id) - Escaped JSF ids with semi colon to work with jQuery.

To call it:

PrimeFaces.escapeClientId("someform:somepanel:somebutton")

which returns:

#someform\\:somepanel\\:somebutton

Internally, it just calls replace(/:/g,"\\:") and adds the #, so you could use that, too.

Answer 5

I have created a function to escape colons for JSF in jQuery:

//USAGE: $(espaceIdForJSF('#someId:anotherId'));
function escapeIdForJSF(id) {
   return id.replace(/:/g,"\\:").replace(/\./g,"\\.");
}

Answer 6

Use this trick: jQuery($('myid'))

Reason: I'm using "prototype" to look up element by id, then I pass result to jQuery.

Pros: easier to read. Cons: need Prototype and jQuery, but RichFaces uses Prototype anyway.

Answer 7

JQuery 3.0 provides an escape function:

https://api.jquery.com/jQuery.escapeSelector/

$( "#" + $.escapeSelector( evilId ) );