0

I have the following html template as a string in JS:

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!

I would like to write some regex that will return the tag and it content (may be more then one repeater on the page) so the result would be something like this:

<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>

can't find any working example anywhere and can't figure it out. any help would be appreciated.

Thanks

EDIT

As suggested in an answer below - I tried this:

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

myArray returns null object.

developer82
  • 13,237
  • 21
  • 88
  • 153
  • Are you aware of http://stackoverflow.com/a/1732454/113195? How about feeding the thing in a `document.createDocumentFragment()` and using DOM methods? – Boldewyn Mar 13 '14 at 10:25
  • @Boldewyn - as I mentioned above - it a string. that string is html tags but still a string. – developer82 Mar 13 '14 at 10:27
  • So what? You always ever parse strings with regexes. It's just when the strings contain HTML/XML, and you want to _gain knowledge_ of that markup by means of a regex, that this is usually a bad idea. – Boldewyn Mar 13 '14 at 10:36
  • @developer82 have you checked my answer ? – aelor Mar 13 '14 at 10:38
  • Read the [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) on `Regexp.exec`. When the expression fails, `null` is returned. – Boldewyn Mar 13 '14 at 10:43
  • see selected answer - it is possible! – developer82 Mar 13 '14 at 10:45
  • It is possible *in some special cases*. It is not possible reliably in all valid appearances. Think for once of nested `` elements. What will your regex match? – Boldewyn Mar 13 '14 at 10:46
  • As far as I'm concerned, I've done the best I could. Good luck anyway. https://xkcd.com/386/ – Boldewyn Mar 13 '14 at 10:47
  • and i highly appreciate it :) – developer82 Mar 13 '14 at 10:52

3 Answers3

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

check this, you will get the array of values matched

aelor
  • 10,892
  • 3
  • 32
  • 48
0

Don't try to parse html with regexs; it will be a pain/impossible. For your particular example I think <repeater>([\s\S]*?)<\/repeater> would do (http://rubular.com/r/E6muRIWaGN) but you would be better off using an html parser and working on the resulting tree (since <repeater> is valid html syntax).

Aegis
  • 1,749
  • 11
  • 12
  • 1
    use a lazy one, that will be correct ([\s\S]*?)<\/repeater> – aelor Mar 13 '14 at 10:29
  • Thanks. on the site you referred it seems to work, but not on my code. Please see my edit above. – developer82 Mar 13 '14 at 10:32
  • @developer82 Not sure why it doesn't work with the RegExp constructor; use a literal (better performance too): `var pattern = /([\s\S]*?)<\/repeater>/gi` – Aegis Mar 13 '14 at 10:36
0

You can use standard DOM methods, that are way more reliable. I've put together a small JSFiddle. It works like this:

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

var repeaterElement = frag.querySelector('repeater');
var string = repeaterElement.outerHTML;
Boldewyn
  • 81,211
  • 44
  • 156
  • 212