JavaScript Str.Replace with Promise

Question

I need to do about 100 substring replacements in 1 large string variable.

The rules are: I need that to be Sequential, so that the second replacement cannot be executed until the first is completed. Each subsequent replacement call must WAIT until the first is completed. The resulting string from the previous replacement must be parsed to the next replacement call by using the same variable.

The following won't work in my case because in an Asynchronous environment, LINE2 will be completed BEFORE LINE1:

LINE1: HTML = HTML.Replace("Roger", SomeLargeFunction());
LINE2: HTML = HTML.Replace("Peter", "John");

I know this could be solved by using Promises(), but I just can't make this work at all. Could you please tell me what am I doing wrong?

The following is an example just to make it easy to understand, but even this simple code is not working... No errors, the function just gets stuck somewhere.

var MyName = "JOHN LENXYZ";
MyName.replace("X", "N")
      .then(MyName => return MyName.replace("Y","O"))
      .then(MyName => return MyName.replace("Z","N"))
      .then(MyName => console.log ("Right Name: " + MyName))

EDIT: I wasn't very clear about my question, so please allow me to elaborate a bit more:

HTML is a variable that contains a large HTML File, basically tables with some substrings like these: [FNAME], [LNAME], [DOB], [INCOME], etc, etc. There are actually 100 of these substrings that I have to replace one by one and by using information from a custom form

In some cases these substrings can be replace with values taken straight from Input Field ($w("#FirstName").value), but in other cases with values from custom functions().

Look at this real case, this was my first logical implemantion:

LINE 001: HTML = HTML.replace("[DOB]", DateToString($w("#DOBPicker").value));
LINE 002: HTML = HTML.replace("[CALC]", Calculations());
.
.
// THIS REPLACEMENT GETS REPEATED 100 TIMES
.
.
LINE 099: HTML = HTML.replace("[FIRST]", $w("#FirstName").value)
LINE 100: HTML = HTML.replace("[LAST]", $w("#LastName").value);

As you can see, each time the string HTML gets replaced, it is used again and again in the next line until all subs strings "[xxxxx]" inside the variable HTML are fully replaced.

Now, this is the interesting part: Since Line 001 and Line 002 takes more time to be processed than Line 099 and 100, unbelievably the Lines 099 and 100 get their result FIRST!!! Yes, the “REPLACE” gets fully executed in lines 099 and 100 BEFORE lines 001 and 002. That's is Asynchronous Execution.

PROBLEM IS: because of the replacement in LINE 002 is the LAST to be finished (because of the function Calculations() takes longer to complete), ALL OF THE REPLACEMENTS FROM LINE 003 TO LINE 100 (which were already completed) GET OVERWRITTEN with the value the HTML variable had in LINE 002. It's like a roll back effect.

As you can see, that's the reason I need each replacement to be fully completed before the nex replacement gets executed. The perfect solution would be using Chained Promises, but I just can't figure out how to do it.

I'm using JavaScript. Any help will be appreciated,

Thank you.

Answer 1

Thank you everyone for your feedback, greatly appreciated. I finally fixed my issues this way:

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  var result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();