Как показать текст абзаца с JavaScript, включая теги <p>?

Question

Я новичок в JavaScript и реагировать. у меня есть текст, который содержит некоторые теги абзаца, такие как

newline и ... из текстовой области с CKEDITOR. Как я могу показать сохраненный текст в HTML-тег? например, я хочу показать этот текст:

myString=<p>Cumque et blanditiis magnam optio amet. Eum eos et et et sit autem optio. Asperiores fuga iure quis sequi voluptas laboriosam et.</p>
<div className={'myclass'}>myString</div>

в HTML-теге?

Answer 1

Процесс очистки строки его html-тегов или другого вредоносного кода javascript называется санитаризацией.

Один из способов заключается в использовании

protectjSetInnerHTML

.

dangerouslySetInnerHTML является заменой React для использования innerHTML в DOM браузера.В общем, настройка HTML из кода рискованна, потому что легко непреднамеренно подвергнуть ваших пользователей атаке межсайтового скриптинга (XSS).Таким образом, вы можете установить HTML непосредственно из React, но вы должны ввести опасно SetInnerHTML и передать объект с ключом __html, чтобы напомнить себе, что это опасно.Например:

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Но я рекомендую использовать библиотеки, такие как DomPurify или SanitizeHtmlReact

, потому что они более гибкие и имеютмного опций.

Проверьте их примеры и демонстрации для получения дополнительной информации

Answer 2

Для этого мы можем написать метод, который принимает String и заменяет специальный символ HTML на

var charMap ={
 '<' : '&lt; ',
 '>' : '&gt'
 }`

Answer 3

Для этого используйте dangerouslySetInnerHTML :

<div className={'myclass'} dangerouslySetInnerHTML={{__html: myString}}/>