CrossBrowdy - Basic tutorial

Data

Strings and Template rendering

Here is an example of strings management:


	//Checks whether it is a string or not:
	var myString = "Hello, CrossBrowdy!";
	if (CB_isString(myString)) { CB_console("It is a string!"); }
	else { CB_console("It is not a string!"); }
	
	//Returns the given element if it is a string or an empty string otherwise:
	var a = CB_forceString("a"); //Returns: "a".
	var b = CB_forceString(123); //Returns: "" (empty string).
	var c = CB_forceString(0xFF); //Returns: "" (empty string).
	var d = CB_forceString([1, 2, 3]); //Returns: "" (empty string).
	var e = CB_forceString([]); //Returns: "" (empty string).
	var f = CB_forceString({ "property" : "value" }); //Returns: "" (empty string).
	var g = CB_forceString({}); //Returns: "" (empty string).
	var h = CB_forceString(null); //Returns: "" (empty string).
	var i = CB_forceString(undefined); //Returns: "" (empty string).
	var j = CB_forceString(NaN); //Returns: "" (empty string).

	//Parses a given element as a string, returning an empty string if not possible:
	var a = CB_parseString("a"); //Returns: "a".
	var b = CB_parseString(123); //Returns: "123" (string).
	var c = CB_parseString(0xFF); //Returns: "255" (string).
	var d = CB_parseString([1, 2, 3]); //Returns: "" (empty string).
	var e = CB_parseString([]); //Returns: "" (empty string).
	var f = CB_parseString({ "property" : "value" }); //Returns: "" (empty string).
	var g = CB_parseString({}); //Returns: "" (empty string).
	var h = CB_parseString(null); //Returns: "" (empty string).
	var i = CB_parseString(undefined); //Returns: "" (empty string).
	var j = CB_parseString(NaN); //Returns: "" (empty string).
	
	//Trims undesired strings from a string, case sensitive:
	//NOTE: functions below are equivalent to 'CB_Arrays.trim', 'CB_Arrays.ltrim' and 'CB_Arrays.rtrim'.
	var myFruit = "  watermelon    ";
	var stringTrimmed = CB_trim(myFruit); //Strips spaces. Returns: "watermelon".
	var stringTrimmed_2 = CB_trim(myFruit, "n"); //Trims "n". Returns: "  watermelon    ".
	var stringTrimmed_3 = CB_trim(myFruit, [" ", "l", "e", "n"]); //Trims spaces, "l", "e" and "n". Returns: "watermelo".
	var stringTrimmed_4 = CB_trim(myFruit, [" ", "wat", "on"]); //Trims spaces, "wat" and "on". Returns: "ermel".
	var stringTrimmed_5 = CB_ltrim(myFruit); //Trims spaces in the left. Returns: "watermelon    ".
	var stringTrimmed_6 = CB_ltrim(myFruit, [" ", "w", "ate", "o"]); //Trims spaces, "w", "ate" and "o" in the left. Returns: "rmelon    ".
	var stringTrimmed_7 = CB_rtrim(myFruit); //Trims spaces in the right. Returns: "  watermelon".
	var stringTrimmed_8 = CB_rtrim(myFruit, [" ", "l", "n", "o"]); //Trims spaces, "l", "n" and "o" in the right. Returns: "  waterme".
	
	//Replacing strings easily (with the regular expression generated by 'CB_regularExpressionString'):
	var myString = "Line1\nLine2\nLINE3";
	var myString_2 = myString.replace(CB_regularExpressionString("e"), "A"); //Replaces first occurrence of "e" by "A". Returns: "LinA1\nLine2\nLINE3".
	var myString_3 = myString.replace(CB_regularExpressionString("e", true), "A"); //Replaces all occurrences of "e" by "A". Returns: "LinA1\nLinA2\nLINE3".
	var myString_4 = myString.replace(CB_regularExpressionString("e", true, true), "A"); //Replaces all occurrences of "e" by "A", case insensitive. Returns: "LinA1\nLinA2\nLINA3".
	var myString_5 = myString.replace(CB_regularExpressionString("e", false, true), "A"); //Replaces first occurrence of "e" by "A", case insensitive. Returns: "LinA1\nLine2\nLINE3".

	//Another easy way to replaces all the given occurrence from a given string or array of strings ("myString" could be an array of strings, with as many levels as we wish):
	var myString_6 = CB_replaceAll(myString, "e", "A"); //Replaces all occurrences of "e" by "A". Returns: "LinA1\nLinA2\nLINE3".
	var myString_7 = CB_replaceAll(myString, "e", "A", true); //Replaces all occurrences of "e" by "A", case insensitive. Returns: "LinA1\nLinA2\nLINA3".
	var myString_8 = CB_replaceAll(myString, ["e", "o", "i"], "A"); //Replaces all occurrences of "e", "o" and "h" by "A". Returns: "LAnA1\nLAnA2\nLINE3".
	var myString_9 = CB_replaceAll(myString, ["e", "o", "i"], "A", true); //Replaces all occurrences of "e", "o" and "h" by "A", case insensitive. Returns: "LAnA1\nLAnA2\nLANA3".

	//Combine two sets of URI parameters (the same can be done with 'CB_Net.combineURIParameters'):
	var parametersCombined = CB_combineURIParameters("parameter1=value1&parameter2=value2", "parameter3=value3&parameter4=value4"); //Returns 'parameter1=value1&parameter2=value2&parameter3=value3&parameter4=value4'.
	var parametersCombined_2 = CB_combineURIParameters("?parameter1=value1&parameter2=value2", "?parameter3=value3&parameter4=value4"); //Returns 'parameter1=value1&parameter2=value2&parameter3=value3&parameter4=value4'.
	var parametersCombined_3 = CB_combineURIParameters("??parameter1=value1&parameter2=value2&&", "???&parameter3=value3&parameter4=value4&"); //Returns 'parameter1=value1&parameter2=value2&parameter3=value3&parameter4=value4'.

	//Other functions:
	var myHTML = CB_nl2br(myString); //Replaces "\n" by "<br />". Returns: "Line1<br />Line2<br />LINE3". Equivalent to 'CB_nlToBr'.
	var myString_6 = CB_br2nl(myHTML); //Replaces "<br />" by "\n". Returns: "Line1\nLine2\nLINE3". Equivalent to 'CB_brToNl'.

CrossBrowdy can also manage templates. If available, it will use the Handlebars.js library (not included by default) to render them. Otherwise, it will fallback automatically to a simple rendering method (just replacing variables with their value, without processing control structures, etc.). Here is an example of template rendering management:


	//Places the template desired in a string:
	var templateAsString = "Hello, {{name}}! Welcome to {{locations.first}}."; //Just an example, it could come from a file.
	
	//Sets an object with the information for rendering the template:
	var JSONObject = { "name" : "CrossBrowdy", "locations" : { "first" : "Wonderland" } };
	
	//Renders the string (it will use Handlebars.js if available or fallback automatically to vanilla JavaScript otherwise):
	var templateAsString_rendered = CB_renderString(templateAsString, JSONObject); //If Handlebar.js is not available, it will only replace variables with their values, without processing control structures, etc.
	CB_console(templateAsString_rendered); //Shows: "Hello, CrossBrowdy! Welcome to Wonderland.".
	
	//We can avoid using Handlebars.js, forcing vanilla JavaScript processing (it will only replace variables with their values, without processing control structures, etc.):
	var templateAsString_rendered_2 = CB_renderString(templateAsString, JSONObject, true); //In this case, it would contain the same as 'templateAsString_rendered'.
	
	//When using vanilla JavaScript processing, we can also define a maximum depth level for reading the JSON object (for performance purposes):
	var templateAsString_rendered_3 = CB_renderString(templateAsString, JSONObject, true, 20); //In this case, it would contain the same as 'templateAsString_rendered'.

	//It is also possible to get the string of the desired path in a JSON object this way:
	//NOTE: when dealing with any kind of values (not only strings), 'CB_getValueIndex' can be a better option.
	var name = CB_getValuePath(JSONObject, "name"); //Returns "CrossBrowdy".
	var locations = CB_getValuePath(JSONObject, "locations"); //Returns an empty string (as a string could not be found in the given path).
	var locationsFirst = CB_getValuePath(JSONObject, "locations.first"); //Default separator is dot ("."). Returns "Wonderland".
	var locationsFirst_2 = CB_getValuePath(JSONObject, "locations@first", "@"); //Using "@" as separator. Returns "Wonderland".
	var unexisting = CB_getValuePath(JSONObject, "this.path.does.not.exist"); //Returns an empty string (as a string could not be found in the given path).

Check the API documentation to read more about some global functions and variables.

All the examples together can be downloaded here.

Go back to Guides & Tutorials