How do I escape special characters in jquery

Question

I'm using the get element by class function $(".classname") but it doesn't work when the class name has a space, plus sign, slash in it (I can't change the class names)

var summaryLEVEL5 = $(".LEVEL 5");
    var summaryLEVEL5Total = 0;
    for (i=0; i < summaryLEVEL5.length; i++){
        summaryLEVEL5Total = summaryLEVEL5Total + parseInt(summaryLEVEL5[i].innerHTML);
    }

    var columnLEVEL5CapGroup = $(".LEVEL 5CapGroup");
    columnLEVEL5CapGroup[columnLEVEL5CapGroup.length - 1].innerHTML = summaryLEVEL5Total;

the function above is what i am using. it seems to work for all the othe classnames but not ones with a space like between'level' and '5'

how can I escape space,plsu sign, forward slash?

I'm pretty sure those characters aren't allowed in a class name - see http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names — fin1te, Apr 19 '11 at 13:58

score 4 · Accepted Answer · answered Apr 19 '11 at 13:59

4

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

answered Apr 19 '11 at 13:59

Jacob Mattison

50,258
9
107
126

+1 [The documentation to show that](http://www.w3.org/TR/html401/struct/global.html#h-7.5.2): "Multiple class names must be separated by white space characters." – lonesomeday Apr 19 '11 at 14:01

score 1 · Answer 2 · answered Apr 19 '11 at 14:00

It does not make any sense for a class name to have a space in it. When a "class" attribute has multiple words separated by spaces, it means that the element has multiple separate class values. The way you find those is by juxtaposing two separate "." expressions:

var whatever = $('.LEVEL.5CapGroup');

No space between them, and a "." before each class name.

As to other "special" characters, jQuery will honor "\" as an escape character:

var whatever = $('.className\.WithDot');

score 1 · Answer 3 · answered Apr 19 '11 at 14:01

The problem splits up in two groups: whitespace and others. For others, like brackets, it's straight forward: escape them with a backslash \, and you're done.

The space is trickier because of the definition of classes: They are a list of white-space separated tokens. That means, that you have no guarantee, that any browser will keep the order, in which the single classes are defined.

Fortunately you can then query each 'space-separated' class like this:

.LEVEL.5

Note, that the space is now replaced by a dot. You can, however, not apply this solution to more spaces in a row or decide between space and tab, for example.

score 0 · Answer 4 · answered Apr 30 '14 at 07:09

Special chars like + can be used as classnames,

they must be escaped w SINGLE Backslash in the CSS

see How to escape any character in CSS;

http://mathiasbynens.be/notes/css-escapes

Have tested , and it works fine for CSS but in jQuery you use DOUBLE \\

:)

score 0 · Answer 5 · answered Apr 19 '11 at 14:00

0

You can't have a space in a CSS class name, this would result in a descendant selector: http://api.jquery.com/descendant-selector/ (CSS spec: http://www.w3.org/TR/CSS2/selector.html#descendant-selectors)

answered Apr 19 '11 at 14:00

Mark Keats

1,390
8
15

score 0 · Answer 6 · edited Dec 17 '11 at 18:09

Have a look at the validation plug-in.

Whatever you do, validate the username at the server side too.

Here is the code for removing special characters (like !, >, ?, ., # etc.,) from a string using JavaScript:

<script language="JavaScript">
<!-- var temp = new String('This is a te!!!!st st>ring... So??? What...'); document.write(temp + '<br>'); temp =  temp.replace(/[^a-zA-Z 0-9]+/g,''); document.write(temp + '<br>'); //-->
</script>

How do I escape special characters in jquery

6 Answers6