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":44},"categories":[1],"tags":[4842,27,431,875,876],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/6333"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=6333"}],"version-history":[{"count":1,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/6333\/revisions"}],"predecessor-version":[{"id":51922,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/6333\/revisions\/51922"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=6333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=6333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=6333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}