1

Prettify.JS を使用して、開発中の Web サイトにコードを表示しています。スクリプト タグ、特に「非リンク」タグに問題があるようです。

<pre>
// Link CSS
&lt;link rel=&quot;stylesheet&quot; href=&quot;device.css&quot; /&gt;

// Link JQuery
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;

// Link DeviceJS
&lt;script type=&quot;text/javascript&quot; src=&quot;device.min.js&quot;&gt;&lt;/script&gt;

// Initialize DeviceJS
&lt;script&gt;
    $(document).ready(function () {
        $('selector').devicejs(options);
    });
&lt;/script&gt;
</pre>

このコードは次のように表示されます (script タグ全体が赤くなっていることに注意してください)。

コードをきれいにする

ただし、以下の小さなハックを行うと (スクリプトの開始タグを閉じる前に、目に見えない html を追加します):

<pre>
// Link CSS
&lt;link rel=&quot;stylesheet&quot; href=&quot;device.css&quot; /&gt;

// Link JQuery
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;

// Link DeviceJS
&lt;script type=&quot;text/javascript&quot; src=&quot;device.min.js&quot;&gt;&lt;/script&gt;

// Initialize DeviceJS
&lt;script<span style="display:none;"> t</span>&gt;
    $(document).ready(function () {
        $('selector').devicejs(options);
    });
&lt;/script&gt;
</pre>

OKと表示されているようです：

ハッキング後にコードをきれいにする

問題は、リンクされていない複数のスクリプト タグ ブロックを追加した場合です。問題が再び発生します。したがって、次のコード：

<pre>
// Link CSS
&lt;link rel=&quot;stylesheet&quot; href=&quot;device.css&quot; /&gt;

// Link JQuery
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;

// Link DeviceJS
&lt;script type=&quot;text/javascript&quot; src=&quot;device.min.js&quot;&gt;&lt;/script&gt;

// Initialize DeviceJS
&lt;script<span style="display:none;"> t</span>&gt;
    $(document).ready(function () {
        $('selector').devicejs(options);
    });
&lt;/script&gt;

&lt;script<span style="display:none;"> t</span>&gt;
    $(document).ready(function () {
        $('selector').devicejs(options);
    });
&lt;/script&gt;
</pre>

次のように表示されます。

ここに画像の説明を入力

Prettify.JS ソース コードを調べたところ、1211 行目に次のように表示されました。

['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],

これはレクサーの一部であると私は信じています。

私は Regex Ninja ではないので、Prettify.JS が属性のない非リンク スクリプト タグに対応できるように、これを微調整する方法を教えていただければ幸いです。

前もって感謝します。

4

1 に答える 1

0

HTMLの例は、これが正常に機能していることを示しているので、問題は、コンテンツをHTMLとして認識せず、間違った言語ハンドラーを使用していることを示していると思われます。prettifyをどのように呼び出しているかを確認せずに、言うのは難しいです。

Prettify.JSのソースコードを調べたところ、1211行目に次のように表示されています。

['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],

これはレクサーの一部であると私は信じています。

あなたは正しいです。これは、スクリプト要素がで始まると言っています

<script\b[^>]*>

または、テキスト（末尾<scriptが大文字と小文字を区別しない）の後に単語の区切りが続き、任意の数の非文字の後に/i>>

それで

([\s\S]*?)

終了タグの前に必要な最小文字数に貪欲に一致しません。これはグループ1をキャプチャしているため、このコンテンツはタイプヒントを使用して再帰的にプリティファイされますlang-js。

ついに

(<\/script\b[^>]*>)

オープンタグと同様に機能しますが、クローズタグです。おそらくキャプチャグループに含まれるべきではありませんが、それが正確さに影響することはありません。

于 2012-11-10T22:08:39.560 に答える