0

ファイルからテンプレートを読み込みます。私のテンプレートの構造:

[[style]].someclass{padding:10px 15px}[[/style]]
[[code]]<tr><td class="someclass">{{text}}</td></tr>[[/code]]

「テンプレート」変数で .get() によってテンプレートをロードします。

$.get('template.html', function(template) {
 if (template) {
   //cut css styles from [[style]]..[[/style]] etc.
 }
});

これらのマークアップ間のコンテンツを取得するにはどうすればよいですか?

ブロックの内容 ([[style]]..[[/style]], [[code]]..[/code]]) を var style = ..., var のような関連変数に割り当てるだけです。コード = ... :)

PS私は表現を理解していると思います...私の英語で申し訳ありません:)

4

3 に答える 3

2

[[code]]と[[style]]は標準のマークアップ言語タグではありません。それらはDOM要素として解釈されないため、単純なjQueryメソッドを使用してそれらを解析することはできません。

正規表現を使用してこれを行う方法は次のとおりです。すべてのコードとスタイルブロックの内容を配列に格納します。

$.get('template.html', function (template) {
    var codeReg = /\[\[code]]([\s\S]*?)\[\[\/code]]/g,
        styleReg = /\[\[style]]([\s\S]*?)\[\[\/style]]/g,
        codes = [],
        styles = [],
        item;
    while (item = codeReg.exec(template))
        codes.push(item[1]);
    while (item = styleReg.exec(template))
        styles.push(item[1]);
    console.log(codes);
    console.log(styles);
});

実例（それらの$.postをサポートしていないため、例としてます。）$.get/echo/html/

興味深いトピック：

正規表現リファレンス

JS正規表現キャプチャグループを配列に保存する最良の方法は？

編集：すべての空白文字（新しい行を含む）と非空白文字（つまり、すべての文字）に一致する文字クラスによって、.でほぼすべての文字に一致するメタ文字を交換しました。参照(.*?)[\s\S]

于 2012-07-01T21:28:22.337 に答える
1

HTML

内部 html を変更および取得するには、jQuery を簡単に使用できます。

jQuery HTML 関数

これを成功させるには、jQuery セレクターを使用する必要があります。

jQuery セレクター

特定のセレクター (いくつか例を挙げると):

クラスセレクター

要素セレクター

CSS

CSS (<style>タグ間のもの) を変更するには、jQuery を使用することもできます。上記のセレクターを使用すると、次のことが便利になります。

さまざまな jQuery CSS 関数

jQuery CSS 関数

于 2012-07-01T20:28:29.873 に答える
0

コードタグのhtml値を変更します。

$("code").html("*whatever you want*");

要素のcssプロパティを変更します。これは、idで選択（選択文字列の前に「＃」を付ける）、クラスで選択（選択文字列の前に「。」を付ける）、または次の方法で選択できます。要素のタイプ（文字列はタグ名、つまり「body」、「code」、「div」になります）。スタイルタグのhtml値を変更する代わりに、これを行う必要があります。

$("*anelement*").css({*cssproperty*: *cssvalue*, *cssproperty*: *cssvalue*});
$(".*classofanelement*").css({*cssproperty*: *cssvalue*, *cssproperty*: *cssvalue*});
$("#*idofanelement*").css({*cssproperty*: *cssvalue*, *cssproperty*: *cssvalue*});

..アスタリスク（*）に含まれるものはすべて変更できます

コメントにご不明な点がございましたら、お気軽にご質問ください。

于 2012-07-01T20:37:07.213 に答える