正則表達式在 React 中不起作用（但在控制台中有效）

Question

我有一個正則表達式，應該在每次比賽前添加 2 個換行符。 當我在任何地方測試正則表達式時，它都能完美運行。 即使在我的控制台中，結果也顯示出來，但我在客戶端遇到了問題。 （使用 react.js）

這是我的代碼：

 class Result extends Component { render(){ const string = "8044. (a)(1)For the purposes of Title 2 (commencing with Section 8160), “stop payment notice” means the notice given by a claimant under Chapter 5 (commencing with Section 8500) of Title 2. (2)A stop payment notice given under Title 2 (commencing with Section 8160) may be bonded or unbonded. A “bonded stop payment notice” is a notice given with a bond under Section 8532. An “unbonded stop payment notice” is a notice not given with a bond under Section 8532. (3)Except to the extent Title 2 (commencing with Section 8160) distinguishes between a bonded and an unbonded stop payment notice, a reference in that title to a stop payment notice includes both a bonded and an unbonded notice. (b)For the purposes of Title 3 (commencing with Section 9000), “stop payment notice” means the notice given by a claimant under Chapter 4 (commencing with Section 9350) of Title 3. (c)A reference in another statute to a “stop notice” in connection with the remedies provided in this part means a stop payment notice. " const splitLaw = string.replace( /\\([a-z0-9]\\)\\([a-z0-9]\\)|\\([a-z0-9]\\)/g, (this.replacer = (match) => { console.log(match); return "\\n\\n" + match; }), ); return ( <div> <p>{splitLaw}</p> {console.log(splitLaw)} </div> );}}

這是我在控制台中得到的內容以及結果應該是什么：

8044. 

(a)(1)For the purposes of Title 2 (commencing with Section 8160), “stop payment notice” means the notice given by a claimant under Chapter 5 (commencing with Section 8500) of Title 2.

(2)A stop payment notice given under Title 2 (commencing with Section 8160) may be bonded or unbonded. A “bonded stop payment
  notice” is a notice given with a bond under Section 8532. An “unbonded stop payment notice” is a notice not given with a bond under Section 8532.

(3)Except to the extent Title 2 (commencing with Section 8160) distinguishes between a bonded and an unbonded stop payment notice, a reference in that title to a stop payment notice includes both a bonded and an unbonded notice.

(b)For the purposes of Title 3 (commencing with Section 9000), “stop payment notice” means the notice given by a claimant under Chapter 4 (commencing with Section 9350) of Title 3.

(c)A reference in another statute to a “stop notice” in connection with the remedies provided in this part means a stop payment notice.

由於某種原因在客戶端，它不起作用。 我嘗試使用正則表達式構造函數 - 結果相同。 為什么？

Answer 1

所以，如果你打開DevTools檢查這些透過這個生成的HTML，你會看到，它實際上是輸出打算將DOM，它只是不會被視覺格式化，以表明它是什么。

解決這個問題的兩種方法。

選項 1，CSS：

div {
    white-space: pre-wrap;
}

選項 2：使用段落標簽：通過 '\\n\\n' 拆分 splitLaw 並將每個數組項括在一個段落標簽中。 由於段落標簽是 display: block，這將有效地為您提供您正在尋找的結果。

splitLaw.split('\n\n').map((item, key) => {
    return <p key={key}>{item}</p>
})