JSFiddle - React, Tailwind, and code Playground

by guydog28

HTML

<table>
    <tbody>
        <tr>
            <td>
                <div class="row-fluid">
                    <ul class="thumbnails">
                        <li class="span12">
                            <div class="span3"> <a class="thumbnail" href="/news/##$$data##" data-conditional="##$$full.image##">
                            <img src="/bin/##$$full.image##"/>
                        </a>

                            </div>
                            <div class="span9">
                                 <h4><a href="/news/##$$data##">##$$full.title##</a></h4>

                                <p>##$$full.summary##</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

var $td = $("td");
//console.log($td);
var h = $td.html();
//console.log(h);
$.each($('[data-conditional]', $td),

function (condIdx, element) {
    console.log(element);
});
var funcRender = function (html) {

    return function (data, type, full) {
        var argList = {
            data: data,
            type: type,
            full: full
        };

        var getValueOf = function (str) {
            var variable = str.replace(/\#\#/g, '').replace(/\$\$/g,
                '');
            var variableParts = variable.split(".");
            var finalData = argList;
            for (var j in variableParts) {
                finalData = finalData[variableParts[j]];
            }
            return finalData;
        };
        var patterns = [/\#\#\$\$data\#\#/g, /\#\#\$\$type\#\#/g, /\#\#\$\$full(\.[a-zA-Z_]+?)*\#\#/g];
        for (var i in patterns) {
            var matches = h.match(patterns[i]);
            for (var j in matches) {
                h = h.replace(matches[j], getValueOf(matches[j]));
            }
        }
        console.log(h);
        var h2 = $("<div/>").html(h);
        var t = $("[data-conditional='undefined']", h2);
        console.log(t);
        t.remove();
        return h2.html();
    };
};
/*
var data = "12345";
var type = "type";
var full = {
    "id": "12345",
        "title": "title",
        "summary": "the summary"
};*/

//var patterns = [/\#\#\$\$full(\.[a-zA-Z_]+?)*\#\#/g];

var mRender = funcRender(h);
/*$td.html(mRender("12345", "type", {
    "id": "12345",
        "image": "3333",
        "title": "title",
        "summary": "the summary"
}));*/
$td.html(mRender("12345", "type", {
    "id": "12345",
        "title": "title",
        "summary": "the summary"
}));