[ Multiple find and replace in string ]
I have a string that looks like this,
Joe Bloggs created the {project}Joe Project 1{/project} and created the brief {object}Brief Number 1{/object}
I want to turn this into a string of HTML that would looks like this,
Joe Bloggs created the <a href="" class="project-link">Joe Project 1</a> and created the brief <a href="" class="object-link">Brief Number 1</a>
I know I can do this,
var string = "Joe Bloggs created the {project}Joe Project 1{/project} and created the brief {object}Brief Number 1{/object}";
string.replace("{project}", "<a href='' class='project-link'>");
string.replace("{/project}", "</a>");
string.replace("{object}", "<a href='' class='object-link'>");
string.replace("{/object}", "</a>");
This does not feel particularly succinct though, is there a nicer way of doing this?
Answer 1
You can use a single RegEx
str.replace(/{(project|object)}(.*?){\/\1}/gi, '<a href="" class="$1-link">$2</a>')
Explanation:
{(project|object)}
: Matchproject
orobject
string wrapped in curly braces. Add the string in first captured group.(.*?)
: Match anything lazily to satisfy the condition{\/\1}
:\1
here is the back-reference of the first captured group. Thus, if the first captured group containsobject
this will match{/object}
.gi
:g
is to match all possible strings.i
is to match case-insensitively.$1
and$2
in the replacement part are the first and second captured groups respectively.
var str = 'Joe Bloggs created the {project}Joe Project 1{/project} and created the brief {object}Brief Number 1{/object}';
var result = str.replace(/{(project|object)}(.*?){\/\1}/gi, '<a href="" class="$1-link">$2</a>');
console.log(result);
document.body.textContent = result; // For showing result on page
document.body.innerHTML += '<hr />' + result; // For showing HTML on page
The RegEx can made short as
Answer 2
regex is your friend:
var string = "Joe Bloggs created the {project}Joe Project 1{/project} and created the brief {object}Brief Number 1{/object}";
string = string.replace(/{\/\w+}/g, "</a>"); //with this you strip out closing tag
string = string.replace(/{(\w+)}/g, function(m,m2) {
return "<a href='' class='" + m2 + "-link'>"
})//this part will wrap whatever inside the opening braces in to your desired markup
console.log(string)
Answer 3
There are templating libraries that exist for this purpose. Check out the handlebars templating library to get started (there are lots and lots to choose from).
Answer 4
$.validator.format("Joe Bloggs created the {0}Joe Project 1{1} and created the brief {2}Brief Number 1{1}", "<a href='' class='project-link'>","</a>","<a href='' class='object-link'>")
Source: http://jqueryvalidation.org/jQuery.validator.format/