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并将每个数组项包含在一个段落标记中。由于段落标签显示为：block，因此可以有效地为您提供所需的结果。

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

正则表达式不适用于React（但适用于控制台）

1 个答案: