jquery IDs with spaces

Does anyone know how to select an item in the DOM by ID with jQuery, when that ID has a space?

For example, the ID of my item would be

<div id="content Module">Stuff</div>

How would I select this with jQuery?

If I just do

$("#content Module").whatever() 

jQuery will try to find an item with both the ID of content and the ID of Module, which is not what I am looking for.

I should add that I am working with an old code base where these two word ids are used extensively, so going through and changing all the IDs would be bad.

Use an attribute selector.

$("[id='content Module']").whatever();

Or, better, specify the tag as well:

$("div[id='content Module']").whatever();

Note that unlike $('#id'), this will return multiple elements if you have multiple elements with the same id within your page.

Don't use spaces, the reason for this is simple, space character is not a valid for ID attribute.

> ID tokens must begin with a letter > ([A-Za-z]) and may be followed by any > number of letters, digits ([0-9]), > hyphens ("-"), underscores ("_"), > colons (":"), and periods (".").

But if you don't care about standards try $("[id='content Module']")

Similar thread > https://stackoverflow.com/questions/70579/what-is-a-valid-value-for-id-attributes-in-html

Edit: How id differs in between HTML 4.01 and HTML5

> HTML5 gets rid of the additional restrictions on the id attribute. The > only requirements left — apart from being unique in the document — are > that the value must contain at least one character (can’t be empty), > and that it can’t contain any space characters.

Link: http://mathiasbynens.be/notes/html5-id-class

Just in case anyone is curious, I found that escaping the space will work. This is particularly useful when you don't have control over the target DOM (e.g. from within a userscript):

$("#this\\ has\\ spaces");

Note the double-backslash, which is required.

The method Chris suggested can likely be adapted to work with jQuery functions.

var element = document.getElementById('content Module');
$(element) ... ;

An idea to try:

$("#content" +   + "Module").whatever()

$("#content" + %20 + "Module").whatever()

The semicolon may cause a javascript error. I also recommend changing the ID to not have any spaces.

Also, try document.getElementByID("content Module")

This worked for me.

document.getElementById(escape('content Module'));

While it’s technically invalid to have a space in an ID attribute value in HTML, you can actually select it using jQuery.

See <http://mothereffingcssescapes.com/#content%20module>;:

<script>
  // document.getElementById or similar
  document.getElementById('content module');
  // document.querySelector or similar
  $('#content\\ module');
</script>

jQuery uses a Selectors API-like syntax, so you could use $('#content\\ module'); to select the element with id="content module".

To target the element in CSS, you could escape it like this:

<style>
  #content\ module {
    background: hotpink;
  }
</style>

this can work if you want the element have the exact value for the id

$("[id='content Module']").whatever();

but if you want to check if element have only one of them ( just like class ) with or without other ids

$("[id~='content']").whatever();

this will select the element if it has id="content" or id="content Module" or id="content Module other_ids"

I found for my case that escape did not work because it replaces spaces with %20. I used replace instead e.g. to replace the h1 of the page with the text of a list item. If the menu contains:

<li id="Contact Us"\>Contact Us</li>

function setTitle(menu) {
    $("h1").text( $("li#" + menu.replace(" ", "\\ ")).text() );
}

I was having issues with element ids containing commas and/or spaces in jQuery, so I did this and it worked like a charm:

var ele = $(document.getElementById('last, first'));

This has spaces and does not work:

var ele = $('#last, first');

This has comma and does not work:

var ele = $('#last,first');

Escaping any misc character on selector (along with spaces).

var escapeSelector = function(string) {
  string = string||"";
  if (typeof string !== 'string') return false;
    return string.replace( /(:|\.|\[|\]|,|=|@|\s|\(|\))/g, "\\$1" );

}
console.log($("div[data-id="+escapeSelector("Document (0).json")+"]").text());   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-id="Document (0).json">Howdy</div>