Как я могу вставить промежуток в строку и распечатать его в своем приложении реагирования как 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>'

Answer 1

Звучит так, как будто вам нужно использовать dangerouslysetinnerhtml в компоненте, который отображает текст. Это не обязательно лучшее решение (используйте с осторожностью), как следует из названия, но оно должно решить проблему с тем, как работает ваш код.

Изменить: JSFiddle

  render: function() {
    return <div dangerouslySetInnerHTML={{ __html: html }}></div>;
  }