office js - Document not in sync after replace text

Question

I'm trying to replace some text within a Word Online document but cannot get it to work.

'{{test}} , [[test]] , {test}' results in '13 , 2 , 3' and not '1 , 2 , 3'.

The first text seems to be processed twice.

Any help much appreciated!

Office.initialize = function(reason) {

    function ready() {

        var myTags = [
            { "value": "1", "text": "{{test}}" },
            { "value": "2", "text": "[[test]]" },
            { "value": "3", "text": "{test}" }
        ];

        async function FillTag(tag) {

            await Word.run(async function(context) {

                    var options = Word.SearchOptions.newObject(context);
                    options.matchWildCards = false;

                    var searchResults = context.document.body.search(tag.text, options);
                    context.load(searchResults, 'text');

                    await context.sync();

                    searchResults.items.forEach(function(item) {
                        item.insertText(tag.value, Word.InsertLocation.replace);
                    });
                    await context.sync();
                })
                .catch(function(error) {
                    console.log('Error: ' + JSON.stringify(error));
                    if (error instanceof OfficeExtension.Error) {
                        console.log('Debug info: ' + JSON.stringify(error.debugInfo));
                    }
                });
        }

        async function ProcessArray(myTags) {
            myTags.forEach(async function(tag) {
                await FillTag(tag);
            });
        }

        ProcessArray(myTags);
    }

    if (document.readyState !== 'loading') {
        ready();
    }
    else {
        document.addEventListener('DOMContentLoaded', ready);
    }
};

Answer 1

In your ProcessArray() function, try replacing the forEach statement with a for...of statement, as shown here:

async function ProcessArray(myTags) {
    for (var tag of myTags) {
        await FillTag(tag);
    }
}

Seems that the forEach statement fires off multiple asynchronous calls, without actually awaiting the completion of FillTag each time. If you replace the forEach statement with for...of as shown above, you should get the expected result.

---

UPDATE (additional info re code structure):

@DutchDan -- now that your initial issue has been resolved, here's a more optimal way to structure your code.

Office.initialize = function () {
    $(document).ready(function () {        
        FindAndReplace();
    });
};

async function FindAndReplace() {

    var myTags = [
        { "value": "1", "text": "{{test}}" },
        { "value": "2", "text": "[[test]]" },
        { "value": "3", "text": "{test}" }
    ];

    await Word.run(async (context) => {

        for (var tag of myTags) {
            var options = Word.SearchOptions.newObject(context);
            options.matchWildCards = false;

            var searchResults = context.document.body.search(tag.text, options);

            context.load(searchResults, 'text');

            await context.sync();

            searchResults.items.forEach(function (item) {
                item.insertText(tag.value, Word.InsertLocation.replace);
            });

            await context.sync();
        }
    }).catch(errorHandler);
}

Note:?You can quickly and easily try this snippet yourself by using Script Lab (https://aka.ms/getscriptlab). Simply install the Script Lab add-in (free), then choose "Import" in the navigation menu, and use the following Gist URL:?https://gist.github.com/kbrandl/b0c9d9ce0dd1ef16d61372cb84636898.