Multiple find and replace in string

Question

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?

Tushar · Accepted Answer · 2016-04-12 14:18:07Z

You can use a single RegEx

str.replace(/{(project|object)}(.*?){\/\1}/gi, '<a href="" class="$1-link">$2</a>')

Explanation:

{(project|object)}: Match project or object 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 contains object 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

{((?:pro|ob)ject)}(.*?){\/\1}

maioman · Accepted Answer · 2016-04-12 14:31:27Z

1

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)

edited Apr 12, 2016 at 14:31

answered Apr 12, 2016 at 14:17

maioman

18.8k4 gold badges39 silver badges46 bronze badges

1 Comment

maioman Over a year ago

@Tushar I saw that

Calvin Belden · Accepted Answer · 2016-04-12 14:07:58Z

0

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).

http://handlebarsjs.com/

answered Apr 12, 2016 at 14:07

Calvin Belden

3,1141 gold badge21 silver badges21 bronze badges

1 Comment

Calvin Belden Over a year ago

I wouldn't recommend introducing a custom DSL for rendering markup when there is existing software that fulfills this use case.

Mario Garcia · Accepted Answer · 2016-04-12 14:08:37Z

0

$.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/

answered Apr 12, 2016 at 14:08

Mario Garcia

6435 silver badges18 bronze badges

1 Comment

Tushar Over a year ago

OP didn't say he's using validator or even jQuery.

Collectives™ on Stack Overflow

Multiple find and replace in string

4 Answers 4

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related