実際には、特定の言語に依存せずに正規表現やその他のアルゴリズムを使用することもできます。それが必要なものであることを願っています。

オブジェクト キーが [a-zA-Z0-9_-] 内にあると宣言することで、何らかの方法で値を解析する必要があります。

価値モデル

そこで、カテゴリに分類して、何が見つかるかを確認します (わかりやすくするために、若干簡略化されている可能性があります):

1. '.*' (アポストロフィで囲まれた文字列、貪欲)
2. ".*" (二重引用符で囲まれた文字列、貪欲)
3. [ -]?\d (\.\d )?(%|[A-z] )? (整数と小数、オプションのパーセンテージまたは単位付き)
4. #[0-9A-f]{3,6}(カラー)
5. [A-z0-9_-] (キーワード、名前付きの色、「使いやすさ」など)
6. ([\w-] )\([^)] \) (url()、calc()> などに似た関数。 )

最初のフィルター

これらのパターンを特定する前に、何らかのフィルタリングを実行できることは想像できます。おそらく最初に値文字列をトリミングします。前述したように、# と # は、上記のモードのように表示されないため、preprocessPairs() 関数の先頭でエスケープできます。エスケープされていないセミコロンをどこにも表示したくない場合は、セミコロンをエスケープすることもできます。

認識パターン

その後、 値 内でこれらのパターンを識別することを試みることができ、パターンごとにフィルタリングを再度実行する必要がある場合があります。これらのパターンはいくつか (または 2 つ) の空白文字で区切られることが予想されます。

エスケープされた改行である複数行文字列のサポートを含めても問題ありません。

ロケール

フィルタリングするコンテキストが少なくとも 2 つあることを認識する必要があります (HTML と CSS)。 要素にスタイルを含める場合、入力は安全であり、有効な CSS である必要があります。幸いなことに、要素の style 属性に CSS を含めていないため、これは少し簡単です。

値パターンに基づくフィルタリング

1. アポストロフィで囲まれた文字列 - アポストロフィとセミコロン以外は何も気にしないので、文字列内でこれらの文字の unscaped インスタンスを見つけてエスケープを解除する必要があります。 Escape
2. 上記と同じですが、二重引用符を使用するだけです
3. 問題ないはずです
4. 問題ないはずです
5. 基本的には問題ありません
6. これが楽しい部分です

したがって、ポイント 1 ～ 5 は非常に単純で、ほとんどの値はこの後の単純なフィルタリングとトリミングでカバーされます。いくつかの追加 (パフォーマンスにどのような影響があるかはわかりません) を加えれば、正しい単位やキーワードなどについて追加のチェックが行われる可能性もあります。

しかし、他のポイントと比較して、比較的大きな課題はポイント 6 だと思います。このカスタム スタイルの url() を単純に無効にして、関数への入力をチェックできるようにすることもできます。たとえば、セミコロンをエスケープしたり、関数内を再度チェックしたりすることもできます。 tiny tweak パターンは、たとえば calc() です。

一般的に、これは私の意見です。これらの正規表現にいくつかの調整を加えることで、すでに行っていることを補完し、CSS 機能を調整するたびにコードを調整する手間を省きながら、CSS を入力する際に​​可能な限り柔軟に対応できるようになります。

コメント、議論、批判をしてください。また、特に関心のあるトピックについて触れ忘れていた場合はお知らせください。