8

Sublime/TextMate 言語ファイルでいくつかの構文強調表示の正規表現に取り組んでおり、非自己終了 html タグで「開始」し、それぞれの終了タグで終了する必要があります。

  • 始める：(<)([a-zA-Z0-9:.]+)[^/>]*(>)

  • 終わり： (</)(\2)([^>]*>)

これまでのところ、タグ名をキャプチャすることができ、タグ間の領域に適切なパターンを適用できるように一致しています。

jsx-tag-area:
    begin: (<)([a-zA-Z0-9:.]+)[^/>]*>
    beginCaptures:
      '1': {name: punctuation.definition.tag.begin.jsx}
      '2': {name: entity.name.tag.jsx}
    end: (</)(\2)([^>]*>)
    endCaptures:
      '1': {name: punctuation.definition.tag.begin.jsx}
      '2': {name: entity.name.tag.jsx}
      '3': {name: punctuation.definition.tag.end.jsx}
    name: jsx.tag-area.jsx
    patterns:
    - {include: '#jsx'}
    - {include: '#jsx-evaluated-code'}

現在、開始タグで 0 個以上の html 属性をキャプチャして、それらを強調表示できるようにすることも検討しています。

したがって、タグが<div attr="Something" data-attr="test" data-foo>

attr、data-attr、および 、および とdata-foo一致<する可能性があります。div

のようなもの (これは非常に大雑把です):

(<)([a-zA-Z0-9:.]+)(?:\s(?:([0-9a-zA-Z_-]*=?))\s?)*)[^/>]*(>)

完璧である必要はありません。構文の強調表示のためだけですが、ルックアラウンドなどを使用する必要があるかどうか、タグ内で複数のキャプチャ グループを実現する方法を理解するのに苦労していました。単一の式でも可能です。

編集：特定のケース/質問の詳細は次のとおりです-https: //github.com/reactjs/sublime-react/issues/18

4

4 に答える 4

1

可能な解決策が見つかるかもしれません。

@skamazin がコメントで述べたように、任意の量の属性を取得しようとすると、許可する属性の数を制限するために、属性に一致するパターンを何度でも繰り返さなければならないため、完璧ではありません。

正規表現はかなり怖いですが、目標には役立つかもしれません。少し単純化することは可能かもしれませんし、いくつか調整する必要があるかもしれません

1 つの属性のみの場合、次のようになります。

(<)([a-zA-Z0-9:.]+)(?:(?: ((?<= )[^ ]+?(?==| |>)))(?:=[^ >]+)(?: |>))

デモ

より多くの属性については、これを何度でも追加する必要があります。

(?:(?:((?<= )[^ ]+?(?==| |>)))(?:=[^ >]+)(?: |>))?

たとえば、最大 3 つの属性を許可する場合、正規表現は次のようになります。

(<)([a-zA-Z0-9:.]+)(?:(?: ((?<= )[^ ]+?(?==| |>)))(?:=[^ >]+)(?: |>))(?:(?:((?<= )[^ ]+?(?==| |>)))(?:=[^ >]+)?(?: |>))?(?:(?:((?<= )[^ ]+?(?==| |>)))(?:=[^ >]+)?(?: |>))?

デモ

それがあなたに合っているかどうか、さらに詳細が必要かどうか教えてください.

于 2014-09-10T09:28:50.953 に答える
0

あなた自身の正規表現は、あなたの質問に答えるのに非常に役立ちました.

これは私にとってはうまくいくようです：

/(:?<|<\/)([a-zA-Z0-9:.]+)(?:\s(?:([0-9a-zA-Z_-]*=?))\s?)*[^/>]*(:?>|\/>)/g

/先頭と末尾の は、正規表現が通常必要とする単なるラッパーです。またg、末尾の はグローバルを表すので、繰り返しにも有効です。

正規表現で何が間違っているかを理解するために使用する良いツールは、http: //regexr.com/です。

お役に立てれば！

于 2016-08-08T18:42:33.130 に答える
0

私は sublimetext や react-jsx に慣れていませんが、これは「正規表現はソリューションではなくツールである」というケースのように思えます。

このためのツールとして正規表現を使用するソリューションは、この JsFiddle のような ものになります (正規表現は、 forなどの html エンティティのためにわずかに難読化されていることに注意してください)。&gt;>

実際の置換を行うコード:

blabla.replace(/(&lt;!--(?:[^-]|-(?!-&gt;))*--&gt;)|(&lt;(?:(?!&gt;).)+&gt;)|(\{[^\}]+\})/g, function(m, c, t, a) {
    if (c!=undefined)
        return '<span class="comment">' + c + '</span>';
    if (t!=undefined)
        return '<span class="tag">' + t.replace(/ [a-z_-]+=?/ig, '<span class="attr">$&</span>') + '</span>';
    if (a!=undefined)
        return a.replace(/'[^']+'/g, '<span class="quoted">$&</span>');
});

したがって、ここではまず、称賛ブロックを使用した HTML のこのユースケースに適応したこの一般的なパターンに従って、個別のタイプのグループをキャプチャします。これらのキャプチャは、処理しているキャプチャのタイプを決定する関数に供給され、さらにこのキャプチャ内のサブグループを独自の.replace()ステートメントに置き換えます。

これを行う信頼できる方法は他にありません。これがあなたの環境にどのように変換されるかはわかりませんが、おそらくこれは役に立ちます。

于 2014-09-10T10:34:05.927 に答える