When updating text while looping through SubTextParts using the given forEach method, the text will be replaced at wrong locations caused by JavaScript concurrency.

Consider the following document with 3 SubTextParts that have been inserted with the following code:

TXTextControl.subTextParts.add("MySubTextPart1",1,21,14);
TXTextControl.subTextParts.add("MySubTextPart2",11,57,14);
TXTextControl.subTextParts.add("SubTextPart3",12,93,12);

Synchronous ForEach

The goal is to replace all SubTextParts that begin with the string "My". The obvious way to loop through the collection of SubTextParts would be by utilizing the forEach method in order to compare the name and to select and replace the text:

TXTextControl.subTextParts.forEach(stp => {
  stp.getName(stpName => {
        if (stpName.startsWith("My")) {
          stp.getStart(start => {
                stp.getLength(length => {
                  TXTextControl.select(start - 1, length, () => {
                        TXTextControl.selection.setText("New Text")
                  });
                })
          })
        }
  })
});

The problem with this code is that each function in the forEach loop is executed synchronously and results in the following output:

The replaced text is inserted after the last found SubTextPart.

Using Promises

The solution is the usage of asynchronous functions with a JavaScript Promise we can wait for until the text has been replaced for each SubTextPart individually. The asynchronous function replaceSubTextParts that is shown in the following code uses a for loop to call the replaceText function sequentially.

async function replaceSubTextParts(startsWithText) {
  TXTextControl.subTextParts.getCount(async function(count) {
    for (var i = count - 1; i >= 0; i--) {
      await replaceText(i, startsWithText);
    }
  })
}

function replaceText(i, startsWithText) {
  return new Promise(resolve => {
    TXTextControl.subTextParts.elementAt(i, function(stp) {
      stp.getName(function(name) {
        if (name.startsWith(startsWithText)) {
          stp.getStart(function(start) {
            stp.getLength(function(length) {
              TXTextControl.select(start - 1, length - 1, function() {
                TXTextControl.selection.setText("Replaced SubTextPart Text");
                TXTextControl.focus();
                TXTextControl.clear();
                resolve(true);
              })
            })
          })
        } else resolve(false);
      })
    })
  });
}

After the text has been replaced, the Promise is resolved successfully and the next SubTextPart can be checked. The following screenshot shows that the first two SubTextParts have been replaced successfully.