Заменить <br>теги в строке с переносами строк JS

Question

Я использую реагирование и извлечение из API, где хранятся комментарии.Есть несколько комментариев с тегами br, потому что API приходят от пользователя PHP.Я пытаюсь заменить теги br в каждой строке фактическим переводом строки.Я также использую реагирование, так что jQuery не используется.

Вот что у меня есть:

this.state.notes.forEach((note) => {
  const fixed = note.body.replace(/<br>/g, "\r\n");
  rows.push(<ListGroupItem hover href="#" className="whiter" key= 
  {note.id}>
    <div className="d-flex justify-content-between">
      <h5 className="mb-1">{ note.name }</h5>
      <small>{ commentDate }</small>
    </div> 
    <p className="mb-1">{ fixed }</p>
  </ListGroupItem>)
}

Я заменил его пробелами, и это сработало, но это не такработал с разрывом строки.Где я иду не так?

Редактировать 1: @TJ Crowder Я добавил, как это отображается на странице.rows - пустой массив, ListGroupItem взят из MDBootstrap.

Answer 1

То, как вы заменяете <br>, хорошо, кроме того, что вы можете захотеть оставить пробелы перед закрытием >, а также необязательный / непосредственно перед >:

const fixed = note.body.replace(/<br\s*\\?>/g, "\r\n");

Но это не решает проблему того, что вы получаете HTML, а не простой текст.Лучше всего заставить другой конец присылать вам текст, а не HTML.Отправляя вам HTML, вы получаете значительный объем работы.Вы не хотите просто заменить <br> на разрывы строк, потому что в HTML могут быть все виды других вещей, таких как именованные символьные объекты (<, & и т. Д.), числовые символьные объекты (такие как &#003c;), теги script (открывающие возможность атак XSS) и т. д. Реагирует разумно, когда вы выводите текст, и экранирует < и & и так далее, что онивыводите в виде этих символов, а не HTML, поэтому, если полученный вами HTML имеет, скажем, <, вы фактически увидите на дисплее &, l, t и ;, чтоне идеяЕсли отправной точкой является HTML, интерпретировать его правильно, не допуская сценариев, - и это сложно.(У React есть опция для вставки необработанного HTML, но у него есть нелепо-неловкое имя по причине . :-))

Как только у вас есть текст со стандартными переносами строк (\r, \n или \r\n), вы можете отобразить каждую строку в своем собственном div, чтобы получить разрывы строк в выходных данных, поскольку обычно в HTML разрыв строки (или любой пробел) является простоодин пробел:

<p className="mb-1">{
    fixed.split(/[\r\n]+/).map(line => <div>{line}</div>)
}</p>

Пример:

const Example = ({fixed}) => {
    return <p className="mb-1">{
        fixed.split(/[\r\n]+/).map(line => <div>{line}</div>)
    }</p>;
};

const str =
  "This is a string with line breaks.\r\n" +
  "Line 2\r\n" +
  "Line 3";
ReactDOM.render(
  <Example fixed={str} />,
  document.getElementById("root")
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>