How to replace occurrences of a string by elements of an array in javascript?

Question

I have a template string:

const template = "Answer to {question} must be {YES} and answer to {question} must be {4}";

and an array of values:

const array = ["Is it late?", "What time is it?"];

What I'm trying to achieve is to replace each occurrence of {question} by an element of my array, respecting the index, and preserving the braces. Result string should look like that:

"Answer to {Is it late?} must be {YES} and answer to {What time is it} must be {4}"

I have the notion that it is achievable with replace, or with split and join, but I don't manage to make it work. Any idea?

Константин Ван · Accepted Answer · 2018-03-07 15:33:51Z

3

const template_string = "Answer to {question} must be {YES} and for {question} it's {4}";
const things = ["Is it late?", "What time is it?"]; // This is to be empty.
const result = template_string.replace(/(?<={)question(?=})/mg, _ => things.shift());
console.log(things); // Been empty
console.log(result);

String.prototype.replace() supports a regular expression for things to be matched. You may use lookbehind and lookahead to match question within the brackets; and m for multi-line support, g for multiple matches. And it also accepts a function for generating the replaced ones; I used an arrow function here.

Note that regular expression lookbehind assertion in Javascript is a proposal on Stage 4; it requires quite modern engines (Chrome 62+ supports it.). If that bothers you, the look- stuff is optional; you may use the below instead.

const result = template_string.replace(/\{question\}/mg, _ => `{${things.shift()}}`);

For you, I give you easy-to-opt ones.

const template_string = "Answer to {question} must be {YES} and for {question} it's {4}";
const things = ["Is it late?", "What time is it?"];

function go_with_lookbehind(template_string, things)
{
	const the_things = Array.from(things);
	const result = template_string.replace(
		/(?<={)question(?=})/mg,
		_ => the_things.shift()
	);
	return result;
}

function go_without_lookbehind_but_a_template_literal(template_string, things)
{
	const the_things = Array.from(things);
	const result = template_string.replace(
		/\{question\}/mg,
		_ => `{${the_things.shift()}}`
	);
	return result;
}

function go_without_lookbehind_and_a_template_literal(template_string, things)
{
	const the_things = Array.from(things);
	const result = template_string.replace(
		/\{question\}/mg,
		_ => ('{' + the_things.shift() + '}')
	);
	return result;
}

console.info(go_with_lookbehind(template_string, things));
console.info(go_without_lookbehind_but_a_template_literal(template_string, things));
console.info(go_without_lookbehind_and_a_template_literal(template_string, things));

console.info("template_string: ", template_string); // Unchanged
console.info("things: ", things); // Unchanged

edited Mar 7, 2018 at 15:33

answered Mar 7, 2018 at 5:13

Константин Ван

15.3k8 gold badges80 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Muhammad Uzair Khan Over a year ago

Your regex requires simple fix. Replace with: const result = template_string.replace(/(\{question\})/mg, _ => things.shift());

Константин Ван Over a year ago

@MuhammadUzairKhan Curly braces are part of the regular expression syntax: (thing){(a number)}. And V8 engine is fairly smart that it does not consider {(a non-numeric)} as part of the syntax: /{question}/mg works as I expected anyway. However, you're right; the good practice is escaping such characters no matter what. I'll make an edit for it.

RaphaMex Over a year ago

That's what I was looking for. I did not know replace could support a function as param. Can you put the solution without lookbehind first? For the lazy readers. Thanks!

RaphaMex Over a year ago

Also, I will not use template litterals but strings instead, to support mini-/uglification: '{'+things.shift()+'}'

Константин Ван Over a year ago

@RaphaMex Then go_without_lookbehind_and_a_template_literal is for you.

Hussain Ali Akbar · Accepted Answer · 2018-03-07 06:12:19Z

2

A possibly simpler solution can be:

let counter = 0
const template = "Answer to {question} must be {YES} and answer to {question} must be {4}";
const array = ["Is it late?", "What time is it?"];

let temp = template

// we are checking two things here
// 1. Whether the string contains the {question} or not
// 2. Whether the array index exists or not

while (temp.includes('{question}') && typeof array[counter] !== 'undefined') {
temp = temp.replace('{question}', `{${array[counter]}}`);
counter++;
}

console.log(temp);

//Answer to {Is it late?} must be {YES} and answer to {What time is it?} must be {4}

You can simply have a while condition on the string to see if it contains {question} or not. If it exists and the array index exists then replace the clause with the one in the array.

The extra checks are in place to handle exceptions. If you are sure that the number of instances of {question} will be the same as the number of elements in the array then you can remove the checks.

edited Mar 7, 2018 at 6:12

answered Mar 7, 2018 at 5:58

Hussain Ali Akbar

1,6552 gold badges17 silver badges30 bronze badges

1 Comment

Константин Ван Over a year ago

You may use String.prototype.includes for the .contains.

Alexander Elgin · Accepted Answer · 2018-03-07 07:17:08Z

1

const template = 'Answer to {question} must be {YES} and answer to {question} must be {4}';
const questions = ['Is it late?', 'What time is it?'];

document.write(template.split('{question}').map((chunk, index) => `${chunk}${index < questions.length ? `{${questions[index]}}` : ''}`).join(''));

answered Mar 7, 2018 at 7:17

Alexander Elgin

6,9954 gold badges44 silver badges53 bronze badges

Comments

Raj Nandan Sharma · Accepted Answer · 2018-03-07 05:24:41Z

0

Here is a function that does this. It will replace the {question} as long as there is a respective index in the array

    function replaceCurlies(str,arr,seprator){
      var temp_arr=str.split(seprator);
      var ret=[];
      for(var i=0;i<temp_arr.length;i++){
        if(i<arr.length)
          ret.push(temp_arr[i]+"{"+arr[i]+"}")
        else
          ret.push(temp_arr[i])
      }
      return ret.join()
    }

    const array = ["Is it late?", "What time is it?"];
    const template = "Answer to {question} must be {YES} and answer to {question} must be {4}";
    console.log(replaceCurlies(template,array,"{question}"));

answered Mar 7, 2018 at 5:24

Raj Nandan Sharma

3,8923 gold badges35 silver badges44 bronze badges

Comments

amar_1995 · Accepted Answer · 2018-03-07 05:28:44Z

0

You can first convert string into array of string and then pass it through map and convert the required places and then re-convert the array of string into string.

const array = ["Is it late?", "What time is it?"];
const template = "Answer to {question} must be {YES} and answer to {question} must be {4}";
let arr = template.split(' ');
let i=0;
arr = arr.map(value=>{
  if(value==='{question}')
    {
      value = `{${array[i]}}`;
      i++;
    }
    else
      value = value
  return value
});
arr = arr.join(' ');
console.log(arr);

answered Mar 7, 2018 at 5:28

amar_1995

5954 silver badges15 bronze badges

1 Comment

RaphaMex Over a year ago

Thanks for your answer! template.split('{question}') does a better job. Thanks!

zamil · Accepted Answer · 2018-03-07 05:53:46Z

0

function merge(left,right) {
  var result = [];
  var index = 0;
  var length = left.length;

  while (index < length) {
     result.push(left[index]);
     if(right[index]){ //since array lenghts are not equal
       result.push(right[index]);
     }

     index++;
  }
  return result;
}

const template = "Answer to {question} must be {YES} and answer to {question} must be {4}";
const array = ["Is it late?", "What time is it?"];

var arraySplit = template.split("{question}");
var allArray = merge(arraySplit,array);
var resStr =  allArray.join();

answered Mar 7, 2018 at 5:53

zamil

1,9304 gold badges17 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to replace occurrences of a string by elements of an array in javascript?

6 Answers 6

5 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related