Question

我从文件加载模板。我的模板的结构：

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

我在“template”var：

中通过.get（）加载模板

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

如何在这些标记之间获取内容？

我只需要分配块的内容（[[style]] .. [[/ style]]，[[code]] .. [/ code]]）相关变量如var style = .. 。，var code = ...：）

P.S。我想我明白表示......我为我的英语道歉：）

Answer 1

[[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);
});

Live example（我正在使用$.post作为示例，因为JSFiddle不支持$.get实用程序的/echo/html/。）

有趣的话题：

Regular Expressions reference

Best way to store JS Regex capturing groups in array?

编辑：我将.中匹配几乎任意字符的元字符(.*?)换成符合所有白色的字符类[\s\S]空格（包括新行）和非空格字符（即所有字符）。 Reference

Answer 2

<强> HTML

要更改和获取内部html，您可以轻松使用jQuery：

jQuery HTML function

为了成功完成，您需要使用jQuery选择器：

jQuery Selectors

特定选择器（仅举几例）：

Class Selectors

Element Selectors

<强> CSS

要更改CSS（在<style>标签之间），您也可以使用jQuery。使用上面提到的选择器，以下将派上用场：

Various jQuery CSS functions

jQuery CSS function

Answer 3

更改代码标记的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*});

..星号（*）包含的任何内容都可以更改

如果您在评论中有任何问题，请随时提出问题

如何在标记之间获取代码

3 个答案: