I recently found out that use of Regex with jQuery and replace function can turn out to be a very powerful tool for replacing\/loading data in html dynamically<\/p>\n
The use of replace is made like<\/p>\n
[js]
\nvar a = "Some text here text";
\na=a.replace(\/text\/g,"one")
\n[\/js]<\/p>\n
This will replace all “text” with “one”<\/p>\n
Now imagine how good it would be if we could replace the part of html like “##title##” with a title’s value in a JSON.
\nWe would be able to replace\/load an entire html code dynamically by merely sending a JSON (or a list of JSON) that would replace the content of HTML in javascript.<\/p>\n
Let us consider that we have a html code which is somethinng like:<\/p>\n
[html]
\n<a title=’##title##’ onclick=’showRecipeDetail(\\"##friendlyUrl##\\", this)’> <img src=\\"##imageUrl##\\" height=’75’ width=’75’ \/><div class=’recipeTitle’>##title##<\/div><\/a>
\n[\/html]<\/p>\n
And we want to load this html with JSON content:<\/p>\n
[js]
\n{{title:"abc", friendlyUrl:"xyz", imageUrl:"123"},{title:"pqr", friendlyUrl:"stu", imageUrl:"456"}}
\n[\/js]<\/p>\n
What we will do is that we will identified the values to be replaced by using regex and then replaced all of them using replace function. For eg.:<\/p>\n
[js]
\nvar data= [{title:"abc", friendlyUrl:"xyz", imageUrl:"123"},{title:"pqr", friendlyUrl:"stu", imageUrl:"456"}]
\nvar HTML_Template = "<a title=’##title##’ onclick=’showRecipeDetail(\\"##friendlyUrl##\\", this)’> <img src=\\"##imageUrl##\\" height=’75’ width=’75’ \/><div class=’recipeTitle’>##title##<\/div><\/a>";
\njQuery(data).each(function(index, recipe) {
\n\t\t\tvar html = HTML_Template;
\n\t\t\tjQuery.each(recipe, function(key, value){
\n\t\t\t\tvar regExp = new RegExp("##" + key + "##", ‘g’);
\n\t\t\t\thtml = html.replace(regExp, value)
\n\t\t\t});
\n });
\n[\/js]<\/p>\n
And hence we will have a our html replaced by merely few line of javascript code and a list of JSON (which we might be getting from ajax responce).<\/p>\n
Hope this blog was helpful to you.. \ud83d\ude42<\/p>\n
Thanks and Regard,
\nGaurav Sharma
\n(gauravs@intelligrape.com)<\/p>\n","protected":false},"excerpt":{"rendered":"
I recently found out that use of Regex with jQuery and replace function can turn out to be a very powerful tool for replacing\/loading data in html dynamically The use of replace is made like [js] var a = "Some text here text"; a=a.replace(\/text\/g,"one") [\/js] This will replace all “text” with “one” Now imagine how […]<\/p>\n","protected":false},"author":39,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":56,"footnotes":""},"categories":[1],"tags":[4842,27,431,875,876],"class_list":["post-6333","post","type-post","status-publish","format-standard","hentry","category-technology","tag-html","tag-jquery","tag-regex","tag-regular-expression","tag-replace-all"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t