正则表达式匹配以。开头的字符串。 ＃和正常

Question

我正在尝试确定字符串是以dot，hashtag还是none开头，但我相信我做错了。

<button>

我试图“模仿”jquery获取元素的方式，但由于标识符不存在而无法正常工作。

感谢。

Answer 1

您需要定义标识符。

你可以从简单的事情开始：

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

但它复杂得多。您可以在此处更深入地找到详细信息：

Allowed characters for CSS identifiers

另外，你的第二个正则表达式比较是再次测试id，它应该是class。

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

到

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

在任何情况下，您的代码都会在更复杂的选择器上失败，例如：

• myid.class

• 的.class＃标识
• .class1.class2
• 的A.class
• .aa：最后一个孩子

• myid＆gt; P

• 本身份识别码：否（的.class）

此外，您应该使用.test代替.exec。 .exec将起作用，因为如果它匹配则返回一个信息数组，如果它不匹配则返回null。这应该满足if语句中的布尔值，但.test实际上就是你要找的。

当然，你可以用以下代码替换整个代码：

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

适用于所有现代浏览器（IE 9 +，Chrome 4 +，Firefox 3.6 +，Safari 3.2 +）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

只是举例说明我在评论中提到的内容。

在每种情况下都返回一个真实的数组，因此结果上有数组方法。

因为它返回一个数组，所以Array不是实时列表。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;