Question

我在JS中将以下html模板作为字符串：

Hello
<repeater>
    <div class="row">
        <div class="col col-33"><img src="{{col1}}" /></div>
        <div class="col col-33">{{col2}}</div>
        <div class="col col-33">{{col3}}</div>
    </div>
</repeater>
World!

我想写一些正则表达式，它将返回标签及其内容（可能是页面上的多个转发器），因此结果将是这样的：

<repeater>
    <div class="row">
        <div class="col col-33"><img src="{{col1}}" /></div>
        <div class="col col-33">{{col2}}</div>
        <div class="col col-33">{{col3}}</div>
    </div>
</repeater>

无法在任何地方找到任何有效的例子，无法弄明白。任何帮助将不胜感激。

由于

修改

正如下面的答案所示 - 我试过这个：

var myRe = new RegExp("<repeater>([\s\S]*?)<\/repeater>", "i");
var myArray = myRe.exec(html);

myArray返回null对象。

Answer 1

var str = 'Hello\n<repeater>\n    <div class="row">\n        <div class="col col-33"><img src="{{col1}}" /></div>\n        <div class="col col-33">{{col2}}</div>\n        <div class="col col-33">{{col3}}</div>\n    </div>\n</repeater>\nWorld! somethingg else <repeater> <div>here some test </div></repeater>'
var res = str.match(/<repeater>([\s\S]*?)<\/repeater>/g);
console.log(res);

选中此项，您将获得匹配的值数组

Answer 2

请勿尝试使用正则表达式解析html;这将是一个痛苦/不可能。对于您的特定示例，我认为<repeater>([\s\S]*?)<\/repeater>会做（http://rubular.com/r/E6muRIWaGN），但您最好使用html解析器并处理生成的树（因为<repeater>是有效的html语法）。< / p>

Answer 3

您可以使用更可靠的标准DOM方法。我整理了一个small JSFiddle。它的工作原理如下：

/* assuming var tpl to hold the string */
var frag = document.createElement('div');
frag.innerHTML = tpl;

var repeaterElement = frag.querySelector('repeater');
var string = repeaterElement.outerHTML;

在javascript中使用正则表达式来获取选项卡及其内容

3 个答案: