Regular Expression to Match strings that start with . # and normal

Question

I'm trying to identify if the string start with dot, hashtag or none, but i'm doing something wrong, i believe.

Selector.match = {
    'id'        : new RegExp('^#(' + identifier + ')' ),
    'class' : new RegExp('^\\.(' + identifier + ')' ),
    'tag'       : new RegExp('^(' + identifier + '|[*])' ),
};

    if (Selector.match['id'].exec(this.selector)) {
        console.log('ID');
        this.result.push(document.getElementById(this.selector));

    } else if (Selector.match['id'].exec(this.selector)) {
        this.result.push(document.getElementsByClassName(this.selector));

    } else if (Selector.match['tag'].exec(this.selector)) {
        this.result.push(document.getElementsByTagName(this.selector));

    }

I'm trying to 'emulate' the way that jquery get elements, but is not working because identifier doesn't exist.

Thanks.

Can you show how you are trying to call this via html, etc.? — ps2goat, Jun 05 '15 at 20:14
this is relevant? i just want make the regular expression works.. — , Jun 05 '15 at 20:15
Can't you just look at `selector.charAt(0)` and compare `===` with `"#"` or `"."` etc. Do you really need a RegExp? Of course you may want to coerce `seletor` to a String first, or check that it is a String. You may want to `trim` the string first too. — Xotic750, Jun 05 '15 at 20:15

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

You need to define identifier.

You can start with something as simple as:

var identifier='[A-Za-z0-9_]';

but it's a lot more complex. You can find the details more in depth here:

Allowed characters for CSS identifiers

Also, your second regex comparision is testing for id again where it should be class.

} else if (Selector.match['id'].exec(this.selector)) {
        this.result.push(document.getElementsByClassName(this.selector));

to

} else if (Selector.match['class'].exec(this.selector)) {
        this.result.push(document.getElementsByClassName(this.selector));

And in any case, your code will fail on more complex selectors, such as:

myid.class
.class#id
.class1.class2
a.class
.aa:last-child
myid > p
myid:not(.class)

Also, you should be using .test instead of .exec. .exec will sort of work, because it will return either an array of info if it matches or null if it doesnt' which should satisfy a boolean in the if statement, but .test is really what you are looking for.

Of course, you could just replace the entire code with:

var x = document.querySelectorAll(this.selector);

which works in all modern browsers (IE 9+, Chrome 4+, Firefox 3.6+, Safari 3.2+)

function getElements(selector)
{
  return document.querySelectorAll(selector);
}
console.log(getElements());
console.log(getElements('#one'));
console.log(getElements('#two'));
console.log(getElements('.two'));
console.log(getElements('.one'));
console.log(getElements('*'));
console.log(getElements('div'));
console.log(getElements('blah'));

<div id="one"></div>
<div class="two"></div>
<div class="two"></div>

i know.. but first i need pick with just one id, class or tag.. after i want implement more complex selectors @robert — , Jun 05 '15 at 20:20

score 0 · Accepted Answer · answered Jun 05 '15 at 20:41

Just to give you an example of what I mentioned in my comments.

Returns a real Array in each case, so Array methods are available on the result.

Because it return an array, the Array is not live list.

var slicer = Array.prototype.slice;

function getElements(selector) {
    var trimmed,
        elements;
    
    if (typeof selector === 'string') {
        trimmed = selector.trim();
        switch (trimmed.charAt(0)) {
            case '.':
                elements = slicer.call(document.getElementsByClassName(trimmed.slice(1)));
                break;
            case '#':
                elements = document.getElementById(trimmed.slice(1));
                if (elements) {
                    elements = [elements];
                } else {
                    elements = [];
                }
                
                break;
            default:
                elements = slicer.call(document.getElementsByTagName(trimmed));
        }
    } else {
        elements = [];
    }
    
    return elements;
}

console.log(getElements());
console.log(getElements('#one'));
console.log(getElements('#two'));
console.log(getElements('.two'));
console.log(getElements('.one'));
console.log(getElements('*'));
console.log(getElements('div'));
console.log(getElements('blah'));

<div id="one"></div>
<div class="two"></div>
<div class="two"></div>

Regular Expression to Match strings that start with . # and normal

2 Answers2

myid.class

myid > p

myid:not(.class)