3

css セレクターの入力文字列を解析する最も効率的な方法は、次の組み合わせを特徴とするものです。

  • [key=value]: 属性、0 ～ * インスタンス
  • #id : ID、0 から 1 のインスタンス
  • .class : クラス、0 ～ * インスタンス
  • tagName : タグ名、0 ～ 1 個のインスタンス (文字列の先頭のみ)

(注: ' *' または他の適用可能なコンビネータをタグの代わりに使用できますか?)

そのような：

div.someClass#id[key=value][key2=value2].anotherClass

次の出力に:

[' div',' .someClass',' #id',' [key=value]',' [key2=value2]',' .anotherClass']

または、ボーナスポイントについては、この形式に効率的に変換します（str[0] === '#'たとえば、使用するだけではない方法を読んでください）：

{
 tags : ['div'],
 classes : ['someClass','anotherClass'],
 ids : ['id'],
 attrs : 
   {
     key : value,
     key2 : value2
   }
}

( の削除に注意してください# . [ = ])

正規表現のいくつかの組み合わせを想像.match(..)し、それが進むべき道ですが、私の正規表現の知識は、この状況に対して十分に進んでいるとは言えません。

助けてくれて本当にありがとうございます。

4

1 に答える 1

9

を使用して分割を行うことができます

var tokens = subselector.split(/(?=\.)|(?=#)|(?=\[)/)

変化するもの

div.someClass#id[key=value][key2=value2].anotherClass

に

["div", ".someClass", "#id", "[key=value]", "[key2=value2]", ".anotherClass"]

その後、各トークンがどのように開始するかを確認するだけです (そして、 で始まるトークンの場合は[、それらに が含まれているかどうかを確認します=)。

あなたが記述したオブジェクトを正確に構築する作業コード全体を次に示します。

function parse(subselector) {
  var obj = {tags:[], classes:[], ids:[], attrs:[]};
  subselector.split(/(?=\.)|(?=#)|(?=\[)/).forEach(function(token){
    switch (token[0]) {
      case '#':
         obj.ids.push(token.slice(1));
        break;
      case '.':
         obj.classes.push(token.slice(1));
        break;
      case '[':
         obj.attrs.push(token.slice(1,-1).split('='));
        break;
      default :
         obj.tags.push(token);
        break;
    }
  });
  return obj;
}

デモンストレーション

于 2013-07-26T18:11:18.507 に答える