Как превратить специальные символы?

Question

[ffads livd00]

Из бд приходят вопросы, но в них не превращаются символы, по типу: "&eacute";"&quot",'
Бд
Я применяю .replace
{question.replace(/"/g,'"')}
но символов много и как их изменить на те знаки, что нужно?
запрос выглядит так

export const request = (id) => {
  return fetch(`https://opentdb.com/api.php?amount=10&category=${id}&difficulty=easy&type=boolean`)
  .then(res => {
      if(!res.ok){
          throw new Error(`${res.status} - ${res.statusText}`)
      }
      return res.json()
  })
}

Comments

[WbICHA]

А зачем ты их вообще хочешь поменять?

[Сергей Сергей]

[ffads livd00]

WbICHA, потому что я вывожу вопросы на стр, а эти символы не превращаются и выводятся во так "&eacute" посреди текста

[WbICHA]

ffads livd00, значит ты выводишь их неправильно.

[ffads livd00]

WbICHA, делаю запрос, получаю массив с объектами, и вывожу вопросы через map, как по другому?

[Immortal_pony]

ffads livd00 показывай свой map

[ffads livd00]

Immortal_pony, я не пойму какая разница как я вывожу данные из объекта, если они приходят в таком виде

вот запрос

async function getList () {
    let list = await request()
    setQuestion(list.results)
  }

[Immortal_pony]

ffads livd00 При том что при вставке в документ они должны преобразовываться автоматически.
Пример: https://jsfiddle.net/gbq8uow5/
Вот мы все и хотим понять как вы добиваетесь того что при вставке в документ у вас символы не преобразовываются

[ffads livd00]

Immortal_pony,

{question !== null ? (
        <ul>
          {question.map((item,index) => (
            <li>{item.question}</li>
          ))}
          <button>test</button>
        </ul>
      ):(null)}

[Сергей Сергей]

Immortal_pony, innerText не преобразует. вроде.

[Immortal_pony]

ffads livd00 Это то как вы подготавливаете HTML. Интересен код где вы его вставляете
Сергей Сергей Ну значит не стоит использовать innerText для этого, правда?)

[ffads livd00]

Immortal_pony, так и вставляю в return () компонента реакт

[Immortal_pony]

ffads livd00 ну так и задавайте вопрос с тэгом react. Признаюсь, в нём я не специалист, но быстрый гуглинг показывает что надо использовать dangerouslySetInnerHTML

https://www.npmjs.com/package/react-render-html и вот такая штука ещё есть

[ffads livd00]

Immortal_pony, так описание проблемы было в преобразовании, я не знал что возможна проблема в выводе

[Immortal_pony]

ffads livd00 Действительно :)
Сейчас всё ок? Заработало?)

[Aetae]

Immortal_pony, какбэ название dangerouslySetInnerHTML намекае, что не стоит этого делать. Особливо с тем, что прилетает с чужого api.

[ffads livd00]

Immortal_pony, не могу установить этот пакет, конфликт зависимостей какой то)

[Aetae]

ffads livd00, и не надо, тот пакет написан наркоманом и используется наркоманами.

[Immortal_pony]

Aetae Страх разработчиков React'а перед говнокодерами понятен. Но мы же не такие и понимаем, что так можно поступать только с доверенными и/или прогнанными через санитайзер данными?
Так что к чему эта ремарка-то?

[Aetae]

Immortal_pony,

мы же не такие

Чё, правда? Позвольте усомниться.)

[Immortal_pony]

Aetae Сомневайтесь предметно) С пруфами ;)

[Immortal_pony]

ffads livd00 так а просто с dangerouslySetInnerHTML что?)

[ffads livd00]

Immortal_pony, это заработало, но вы же сказали, что это не желательно) Я вообще впервые сталкиваюсь с проблемой, чтобы не отображались символы

[Immortal_pony]

ffads livd00 Вставка чужого HTML чревата XSS-уязвимостями. Если вы доверяете источнику, то можете использовать dangerouslySetInnerHTML сразу, а если не доверяете, то прогоните этот HTML санитайзером.
https://www.npmjs.com/package/dompurify - вот этим, например

[ffads livd00]

Immortal_pony, а разве строка из объекта взята из бд это html? это же строка просто или нет? ну то есть свойство объекта

[Immortal_pony]

ffads livd00 HTML - это язык разметки. Ваша строка закодирована в HTML )

Answer 1

[Immortal_pony]

В комментариях выяснили, что на чистом JS c использованием innerHTML проблем не возникает.
В вот возникает при использовании React.

React по умолчанию вставляет данные как текст, а как как HTML.
Чтобы этого избежать, можно использовать dangerouslySetInnerHTML.
Если данные приходят не из доверенного источника, то крайне желательно их предварительно обработать (например, с помощью https://www.npmjs.com/package/dompurify)

Answer 2

[Aetae]

const decode = (textarea => text => {
  textarea.innerHTML = text;
  return textarea.value;
})(document.createElement('textarea'));

decode("&eacute");