How to get code between markups

Question

I load template from file. The structure of my template:

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

I load template by .get() in "template" var:

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

How i can get content between these markups?

I just need to assign the contents of the blocks ([[style]]..[[/style]], [[code]]..[/code]]) the relevant variables like var style = ..., var code = ... :)

P.S. I think I understand expressing... I apologize for my English :)

jQuery method `.html()` gets the innerHTML and `.text()` gets the inner text (within the tags) — nbrooks, Jul 01 '12 at 20:08
Could you give any practical example/application of this? Do you want to manipulate/edit the content between those tags? Or simply retrieve their contents? May there multiple be style/code tags inside a single template file? — Fabrício Matté, Jul 01 '12 at 20:39

score 2 · Accepted Answer · edited May 23 '17 at 10:34

[[code]] and [[style]] aren't standard markup language tags. They aren't interpreted as DOM elements, thus you can't simply use simple jQuery methods to parse through them.

Here's how you'd do it with a Regular Expression, storing the contents of every code and style block in an array:

$.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 (I'm using $.post for the example as JSFiddle doesn't support $.get for their /echo/html/ utility.)

Interesting topics:

Regular Expressions reference

Best way to store JS Regex capturing groups in array?

edit: I swapped the match-almost-any-character meta-char . in the (.*?) by a character class [\s\S] which matches all white space (including new lines) and non-white space characters (that is, all characters). Reference

How do I need to change the regular expression if my pattern is not in one line? — Neash, Jul 01 '12 at 21:51
@Neash Edited my answer, seems like Javascript doesn't have a standard dot-match-all modifier to match new lines, learning something new everyday. Edited my answer replacing `.` by `[\s\S]` to match new lines as well, as explained and linked to the reference. `:)` — Fabrício Matté, Jul 01 '12 at 22:15

score 1 · Answer 2 · answered Jul 01 '12 at 20:28

HTML

For changing and getting inner html you can easily use jQuery:

jQuery HTML function

In order to do so successfully, you need to make use the jQuery selectors:

jQuery Selectors

Specific selectors (to name a few):

Class Selectors

Element Selectors

CSS

For changing CSS (that which would be between your <style> tags), you can also use jQuery. Using the above mentioned selectors the following would come in handy:

Various jQuery CSS functions

jQuery CSS function

score 0 · Answer 3 · answered Jul 01 '12 at 20:37

Change the html value of a code tag:

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

Change the css properties of an element, which can be selected by id (by prepending your selecting string with "#"), or can be selected by a class (by prepending your selecting string with "."), or can be selected by the type of element (your string will be the tag name ie. "body", "code", "div"). You should do this instead of trying to change the html value of the style tag:

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

.. Anything contained by asterisks (*) can be changed

Feel free to ask questions if you have any in the comments

How to get code between markups

3 Answers3