javascript - スパンを文字列に挿入し、反応アプリに HTML として出力するにはどうすればよいですか

Question

文字列といくつかの変数を取り、変数を文字列に挿入できるこのコードがあります。テキストは CMS から取得されることが多く、編集可能にする必要があるため、これは私のアプリで必要です。文字列の可変部分が色付けされていたり、別のフォントになっていることがあるので、必要に応じてラップできるようにしようとしていました。しかし、私の反応アプリはすべてを文字列として投稿します。

 var VariableInjection = (stringToEdit, variablesToInject) => {
    const matches = stringToEdit.match(/{[a-z][A-z]*}/g);
    const strippedMatches = matches.map(m => m.replace('{', '')).map(m => m.replace('}', ''));

    for (let i = 0; i < matches.length; i += 1) {
        const replaceWith = variablesToInject[strippedMatches[i]];
        if (typeof replaceWith === 'string' || typeof replaceWith === 'number') {
            stringToEdit = stringToEdit.replace(matches[i], replaceWith);
        } else {
            stringToEdit = stringToEdit.replace(matches[i], `<span class="${replaceWith.class}">${replaceWith.value}</span>`);
        }
    }

    return stringToEdit;
};

VariableInjection("this is the {varA} and this is the {varB}", { varA: 1, varB: 2})与えます：

'this is the 1 and this is the 2'

VariableInjection("this is the {varA} and this is the {varB}", { varA: 1, varB: { value:2, class:"test Class"}) 与えます：

'this is the 1 and this is the <span class="test Class">2</span>'