Replace specific syntax {{colorX}}

find a specific value

by Cory Hughes

HTML

<h1>Grab keys from the original content and then dynamixally generate fields that then populate the original content with the values in the fields...<br> tl;dr? try it out.</h1>
<div>Keys <span id="keyBox"></span></div>
<div>Colors <span id="colorBox">...</span></div><br><br>

<div><b>Source Text:</b><br><span id="infoBox"></span></div><br>
<div id="inputs"></div>

CSS

body {
	background: black;
	color: white;
}

JavaScript

var originalContent = "{{You_can}}{{nani}}{{With_Underscores}}{{but no spaces or other characters!}}{{1_DontStartWithNumbers}}{{With_Underscores}}";
var stylesheet = "";
var originalLoop = 0;
var keys = [];
var variables = [];
var displayVariables = "";

// looks at the content and matches anything with the {{*}} syntax, if its not a unique entry, delete the extra entries.
if (originalLoop === 0) {
	var plus = originalContent.match(/\{{[A-Za-z]\w+\}}/img); //This RegEx will only allow these characters A-Z and _ (underscore).
	plus = plus[0].split(/\s*,\s*/).forEach(function(myString) {
		plus = unique(plus);
		keys = plus;
		keys = $.grep(keys, function(value) {return value != undefined;});
	});
	//keys.reverse();
	$("#keyBox").text("("+keys.length+") : "+keys);
	
	createFields();
	//fieldsToData();
}

// if the values from createField() inputs change (update in future) then update the indexes where that matters and then run the updateStyle function
$("#infoBox").html(originalContent);
$("label input").on('input', function() {
  variables = [];	//Empty the array so we can build it again
	var arrayLength = keys.length;
	for (var i = 0; i < arrayLength; i++) {
		var currentKey = keys[i];
		currentKey = currentKey.slice(2,-2);
		currentKey = $("#"+currentKey).val();
		variables.push(currentKey);
	}
  updateStyle();
});

function createFields() {
	//create fields based on the number of Keys and thier Name (Key = {{Name}})
	var arrayLength = keys.length;
	for (var i = 0; i < arrayLength; i++) {
		var currentKey = keys[i];
		currentKey = currentKey.slice(2,-2);
		nameKey = currentKey.replace(/(_)/g, " ");
		$('<label for="'+currentKey+'">Value for "'+nameKey+'":<br><input id="'+currentKey+'" type="text"></label><br><br>').fadeIn('slow').appendTo('#inputs');
	}
}

// Copy the original stylesheet and replace the matches below (should come from keys in the future, needs to be reworked) 
function updateStyle() {
	stylesheet = originalContent;
	//console.log("Array Length:...