Help accessing the contents of a text component and updating it with a javascript function

Long story short.

I have a page with a text component. This text component has a token, for example, [[token]] (that is not part of a model). That token will refer to an html text that could contain a mustache token such as <p>{{Model.name}} lorem ipsum </p>.

I’m using Javascript (and also tried javascript formula) to reach the [[token]] and then replace by it’s contents.

So goal one would be replace [[token]] with <p>{{Model.name}} lorem ipsum </p>.
Goal 2 would be transforming <p>{{Model.name}} lorem ipsum </p> to something like <p>Jane Doe lorem ipsum </p>.

What I’m doing is using a generic javascript to loop through all page components, identify the type that has that content and then apply the function.

The only issue I’m having is that after I load the component all seems empty or undefined. I attempted various methods from before to get the inner html of that component and apply the function."

This is a snipped of the function.

    // Iterate over all components on the page
    skuid.$.each(page.component.getAll(), function(i, component) {
        // Check if the component is a text component
        if (component.type === 'skuid__text') {
            var cmp = skuid.component.getById([component.id]);
            console.log(cmp);
        }
    });

How can I access the component inner html or input value and update it ?