用换行符替换字符串中的 <br> 标签 JS

Question

我正在使用 React 并从保存评论的 api 中拉取。有多个评论带有 br 标签，因为 api 来自 php 用户。我试图用实际的换行符替换每个字符串中的 br 标记。我也在用react，所以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：@T.J。 Crowder 我添加了它在页面上的显示方式。 rows 是一个空数组，ListGroupItem 来自 MDBootstrap。

Answer 1

您替换 <br> 的方式很好，除了您可能希望在结束 > 之前允许 spaces 和一个可选的 /就在 > 之前：

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

但这并不能解决您得到的是 HTML 而不是纯文本的问题。您最好让另一端向您发送文本而不是 HTML。通过向您发送 HTML，他们给了您大量的工作要做。您不希望只是将 <br> 替换为换行符，因为 HTML 中可以包含各种其他内容，例如命名字符实体（<、&等），数字字符实体（如&#003c;），script标签（开启XSS攻击的可能性）等。React很聪明，当你输出文本并转义 < 和 & 等，它们将作为这些字符输出，而不是 HTML，因此如果您收到的 HTML 具有 <，你实际上会在显示中看到 &、l、t 和 ;，这不是主意。如果您的起点是 HTML，则在不允许脚本的情况下正确解释它是很困难的。（React 确实有一个用于注入原始 HTML 的选项，但它有一个荒谬笨拙的名称 出于某种原因 。:-) ）

获得文本后，使用标准换行符（\r、\n 或 \r\n），您可以将每一行呈现在其自己的 div 中在输出中获取换行符，因为通常在 HTML 中换行符（或白色 space 的任何运行）只是一个 space:

<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>

用换行符替换字符串中的 <br> 标签 JS

Replace <br> tags in string with line breaks JS

javascript

replace

line-breaks

reactjs