How do I check if a string would make a valid html ID using JS?

Question

I have a variable word that populates with various strings and than becomes an id for a new element. I want to check and make sure the string would make a valid html ID. I came across the regex in this: answer, but I don't know how to put it in an if else statement. This is what I tried:

if (/[A-Za-z][-A-Za-z0-9_:.]*/.test(word) === false)
    {
    return findIt(i);
    }

I tried several of the solutions below and they did work, but not completely. I believe either because of white space or quotes. I am essentially creating an ID out of complete random characters so I'd like regex that only allows alphanumeric strings with no quotes and no white space. Below is a combo of the two that is currently working pretty good but there must be a better answer.

 function isValidId(s) {
 return /^[^\s]+$/.test(s);      
 }


    if (isValidId(word)===false){
        console.log('bad '+word);
        return findIt(i);
    }


    else if(/^[A-Za-z][-A-Za-z0-9_:.]*$/.test(word) === false)
    {
        console.log(word+" had junk");
        return findIt(i);
    }

That is an old question which relates to HTML4 spec but not the HTML5 spec. In HTML5, IDs are much more flexible (they can start with a number, for instance). — James Donnelly, Jun 14 '13 at 07:51
@RobG I've tried your method but I'm getting caught up with quotation marks `""whatever"` is not a valid ID. @mishik I tried yours/mine but the white space is the killer there. " wha t ev er" is not valid either. I need something that can take any combination of characters and say true or false. Thanks for trying — Squirrl, Jun 14 '13 at 08:37

score 2 · Accepted Answer · answered Jun 14 '13 at 07:51

2

Result of test() call is already sufficient:

if (/^[A-Za-z][-A-Za-z0-9_:.]*$/.test(word)) {
    return findIt(i);
} else {
    // Does not match
}

answered Jun 14 '13 at 07:51

mishik

9,973
9
45
67

The regex is from OP and that was not really the point of the question. But I've added "^$" to match whole word. – mishik Jun 14 '13 at 07:54
1

This was a restriction for HTML prior to HTML5 that was never strictly implemented by browsers in use (e.g. non–conforming ID values were not necessarily ignored or otherwise treated as errors), so interesting for a validator but of little practical use. – RobG Jun 14 '13 at 08:14

score 1 · Answer 2 · answered Jun 14 '13 at 08:03

1

In HTML5, the only restriction on the ID attribute value is that it contain at least one character and not contain any whitespace, so the following should do the job:

function isValidId(s) {
  return /^[^\s]+$/.test(s);
}

answered Jun 14 '13 at 08:03

RobG

142,382
31
172
209

How can I add quotation marks (",') to that which isn't valid because I believe that could be messing it up? – Squirrl Jun 14 '13 at 08:19
A quotation mark in an ID is [valid in HTML5](http://www.w3.org/html/wg/drafts/html/master/dom.html#the-id-attribute), it can even be the *only* character in the ID. However, if you are concatenating strings to make markup, you might end up with invalid markup. That is a different question about validating markup, not ID values. – RobG Jun 16 '13 at 23:49

score 0 · Answer 3 · answered Aug 09 '13 at 19:28

I use this little snippet:

function (selector) {
    return /^(?:#([\w-]+))$/.exec(selector)[1];
}

It's going to return null if your string is not a valid id or it will return the id without the hash (it will allow you to directly do a document.getElementById()).

Source: sizzlejs.

How do I check if a string would make a valid html ID using JS?

3 Answers3