CODEWITHSUNDEEP
jqueryjsfescapingseam
IAdapter
IAdapter

Reputation: 64747

How to escape ":"?

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"))

Upvotes: 16

Views: 21667

Answers (7)

oleh
oleh

Reputation: 960

JQuery 3.0 provides an escape function:

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

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

Upvotes: 0

sleske
sleske

Reputation: 83599

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.

Upvotes: 2

gorlok
gorlok

Reputation: 1155

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.

Upvotes: 1

Shervin Asgari
Shervin Asgari

Reputation: 24499

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,"\\.");
}

Upvotes: 1

jAndy
jAndy

Reputation: 236032

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;
    });
}

Upvotes: 18

RobertPitt
RobertPitt

Reputation: 57268

use the double backslashes:

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

Related:

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.

Upvotes: 9

VoodooChild
VoodooChild

Reputation: 9784

Try:

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

Upvotes: 5

Related Questions