文字列内の<br>タグを改行JSに置き換えます

debugcn 投稿 Dev

ネイサン・ゲックル

私はreactを使用しており、コメントが保持されているAPIからプルしています。brAPIは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：@TJCrowderページでの表示方法を追加しました。rowsは空の配列であり、ListGroupItemはMDBootstrapから取得されます。

TJクラウダー

置き換える方法<br>は問題ありませんが、閉じる前にスペース>を入れ、オプションの/直前にスペースを入れることもできます>。

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の改行（または空白のいずれかの実行）が1つだけですスペース：

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-1

コメントを追加

サインイン

分類Dev

Related 関連記事

記事