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示例作为 JSFiddle 不支持$.get它们的/echo/html/实用程序。）

有趣的话题：

正则表达式参考

将 JS 正则表达式捕获组存储在数组中的最佳方法？

编辑：我用匹配所有空格（包括新行）和非空格字符（即所有字符）.的(.*?)字符类交换了 match-almost-any-character 元字符。参考[\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 回答