Применение css к строкам
Я использую axios для чтения данных из моего бэкэнда. Данные представляют собой строку, похожую на "phone number: {enter phone number here}".
Я хочу применить css везде, где есть фигурная скобка
let testString = "hello this is my {test} string";
testString = testString.replaceAll("{", "<span style = {{color: 'red'}}>");
testString = testString.replaceAll("}", "</span>");
Есть несколько способов, которыми я хочу применить данные.
Внутри значения TextField
<TextField
rows = {12}
multiline
value = {testString}
></TextField>
Внутри div
<div contenteditable = "true">{testString}</div>
Вместо применения css он просто отображает css в виде строки
hello this is my <span style = {{color: 'red'</span></span>>test</span> string
Чтобы указать React анализировать строку как HTML, вам потребуется опасно установленный внутренний HTML. Совершенно уверен, что невозможно отобразить HTML в поле ввода или <textarea>.
Ответы 2
Что вы хотите сделать, понятно. Вы должны получить строку и показать ее в элементе JSX.
как это:
let testString = ... ; // what ever you get from request
<div>hello this is my <span className = "red-color">{testString}</span> string</div>
ИЛИ:
let testString = ... ; // what ever you get from request
<div>hello this is my <span style = {{color:"red"}}>{testString}</span> string</div>
также вы можете использовать обратные кавычки, чтобы поместить переменные в ваши строки
Эта проблема может быть решена двумя способами, и решения следующие:
Решение 1. Использование dangerouslySetInnerHTML
export default function App() {
let text = "The {text in here} will be color coded";
return (
<div>
<div
className = "solution-1"
dangerouslySetInnerHTML = {{
__html: text
.replace("{", `<span style=color:red>`)
.replace("}", `</span>`)
}}
></div>
</div>
);
}
Как следует из названия, dangerouslySetInnerHTML следует использовать с осторожностью. Если строка получена из ненадежного источника, то лучше избегать этого метода, так как он подвержен XSS-атакам. Подробнее об этом здесь
Решение 2. Использование смещения подстроки
export default function App() {
let text = "The {text in here} will be color coded";
let i = [];
text.replace(/[{.+?}]/g, (match, offset, string) => {
i.push(offset + 1);
});
let formattedText = () => {
return (
<>
<span>{text.substring(0, i[0] - 1)} </span>
<span style = {{ color: "red" }}>{text.substring(i[0], i[1] - 1)}</span>
<span>{text.substring(i[1], text.length)}</span>
</>
);
};
return (
<div className = "solution-2">{formattedText()}</div>
);
}
Второй подход получает индекс открывающей { и закрывающей } фигурных скобок из строки и применяет форматирование только к этой заключенной подстроке. Этот подход подходит, если строка содержит только один блок, заключенный в квадратные скобки, который необходимо отформатировать.
Песочницу с рабочими решениями можно найти здесь
Контекст, в котором вы пытаетесь внедрить свою строку, вероятно, выполняет экранирование HTML в качестве меры безопасности. Если вы можете быть на 100 % уверены, что
{enter phone number here}не будет содержать ничего, кроме номера телефона, то проверьте, можете ли вы отключить это экранирование.