0

わかりました、divに次のデータがあります

<div id="mydiv">
<!--
 what is your present
 <code>alert("this is my present");</code>
 where?
 <code>alert("here at my left hand");</code>
 oh thank you! i love you!! hehe
  <code>alert("welcome my honey ^^");</code>
-->
</div>

私がそこでしなければならないことは、内部<code>の HTML コメントを削除せずに、ブロック内のすべてのスクリプトと HTML コード テキスト ノードを取得することです。それは私の教授から与えられた宿題であり、そのdivブロックを変更することはできません..

これには正規表現を使用する必要があり、これが私がしたことです

var block = $.trim($("div#mydiv").html()).replace("<!--","").replace("-->","");
var htmlRegex = new RegExp(""); //I don't know what to do here
var codeRegex = new RegExp("^<code(*n)</code>$","igm");

var code = codeRegex.exec(block);
var html = "";

それは本当にうまくいきません...正確な答えを出さないでください..教えてください..ありがとう

変数には次のブロックが必要ですcode 

alert("this is my present");
alert("here at my left hand");
alert("welcome my honey ^^");

これは変数に必要なブロックですhtml

 what is your present
     where?
     oh thank you! i love you!! hehe

私の質問は、上記の結果を得るための正規表現パターンは何ですか?

4

3 に答える 3

5

正規表現を使用して HTML を解析することは、すべきことではありません。

あなたの教授は、自分は本当に頭が良く、DOM API にアクセスする方法はなく、バナーを振り回して正規表現を使用して DOM を解析するためのいくつかのマイナーなケースを正当化できると考えていると確信しています。

いいえ、そうではありません。そこに複雑なコードがある場合はどうなりますか? あなたの正規表現は壊れており、これが本番環境にある場合、おそらくセキュリティの悪用になります。

だから、ここに：

http://jsfiddle.net/zfp6D/

  1. DOM をウォークし、ノードから nodeType 8 (コメント) テキスト値を取得します。
  2. HTML パーサーを呼び出します (正規表現ではなく、ブラウザーが HTML を解析するために使用するものです。なぜ HTML パーサーを使用して HTML を解析しないのかは、私にはまったく理解できません。 、でも、釘が入るまで足で踏むだけだと思います」）。
  3. 新しく解析された HTML 内のすべての CODE 要素を見つけます。
  4. それらをコンソールに記録するか、それらでやりたいことは何でもします。
于 2012-07-07T17:35:08.127 に答える
1

無駄なことをたくさんしている。.html() は、内部コンテンツを文字列として提供します。regEx を使用して、そこから必要なものを正確に取得できるはずです。また、regEx リテラル (例: /^regexstring$/) に固執するようにしてください。new RegExp を使用してエスケープ文字をエスケープする必要がありますが、これは非常に面倒です。通常、新しい RegExp は、文字列 var を regEx に入れる必要がある場合にのみ使用します。

文字列の一致関数は regEx を受け入れ、グローバル フラグを追加するとすべての一致のコレクションを返します (例: /^regexstring$/g<-- 'g' に注意してください)。私はこのようなことをします：

var block = $('#mydiv').html(), //you can set multiple vars in one statement w/commas
matches = block.match(/<code>[^<]*<\/code>/g);

//[^<]* <-- 0 or more characters that aren't '<' - google 'negative character class'

matches.join('_') //lazy way of avoiding a loop - join into a string with a safe character
.replace(/<\/*code>/g,'') //\/* 0 or more forward slashes
.split('_');//return the matches string back to array

//Now do what you want with matches. Eval (ew) or append in a script tag (ew).
//You have no control over the 'ew'. I just prefer data to scripts in strings
于 2012-07-07T18:08:52.663 に答える
1

まず第一に、HTML は正規言語ではないため、すべての有効な入力に対して機能する正規表現を使用して一般的な解析を行うことはできないことに注意してください (特に一般的なネストは正規表現では表現できません)。多くのパーサーは正規表現を使用して個々のトークンを照合しますが、他のアルゴリズムを構築する必要があります

ただし、このような固定入力の場合は、構造を処理する場合にすぎません (ただし、正規表現だけでなく、別の解析方法を使用する方が簡単な場合もよくあります)。

まず、すべてのコードを取得します。

var code = '', match = [];
var regex = new RegExp("<code>(.*?)</code>", "g");
while (match = regex.exec(content)) {
    code += match[1] + "\n";
}

contentすでに抽出した div のコンテンツが含まれていると思います。ここで「g」フラグは、これが「グローバル」マッチング用であることを示しているため、正規表現を再利用してすべての一致を見つけることができます。角かっこは、キャプチャ グループを示し、.任意の文字を*意味し、0 回以上繰り返されることを?意味し、「貪欲ではない」ことを意味します (それなしで何が起こるかを確認してください)。

これで、他のすべてのビットを取得するために同様のことができますが、今回の正規表現は少し複雑です。

new RegExp("(<!--|</code>)(.*?)(-->|<code>)", "g")

ここで|は「または」を意味します。したがって、これは「開始コメント」または「終了コード」で始まり、「終了コメント」または「開始コード」で終わるすべてのビットに一致します。また、3 セットのブラケットがあるため、抽出する部分はmatch[2](2 番目のセット) であることに注意してください。

于 2012-07-07T16:45:53.027 に答える