将 \n 替换为 vuejs 上的新行

Question

我正在尝试将 \n 字符替换为来自端点的数据的新行。

---

我试过了<p>{{ item.licensedocument.legal.documentText.replace(/(?:\r\n|\r|\n)/g, '<br />') }}</p>，没有用。当我将 replace() 写到 prob 的末尾时，大括号停止工作并且永远不会像 JS 一样。输出是这样的：

    {{ item.licensedocument.legal.documentText.replace(/(?:\r\n|\r|\n)/g, '
') }}

---

当我写的时候<p>{{ item.licensedocument.legal.documentText }}</p>它就工作了，输出就像

GENERAL SERVICE AGREEMENT\n\nTHIS GENERAL SERVICE AGREEMENT (the "Agreement") dated this 22nd day of June, 2018\nBETWEEN:\nCLIENT\n______________________\n______________________________\nCONTRACTOR\n______________________\n______________________________\nBACKGROUND\nThe Client is of the opinion that the Contractor has the necessary qualifications, experience and abilities to provide services to the Client.\nThe Contractor is agreeable to providing such services to the Client on the terms and conditions set out in this Agreement.\nIN CONSIDERATION OF the matters described above and of the mutual benefits and obligations set forth in this Agreement, the receipt and sufficiency of which consideration is hereby acknowledged, the Client and the Contractor (individually the "Party" and collectively the "Parties" to this Agreement) agree as follows:\n\nSERVICES PROVIDED \nThe Client hereby agrees to engage the Contractor to provide the Client with the following services (the "Services"):

---

我还尝试添加一个方法，如：

 methods: {
    handleNewLine(str) {
      return str.replace(/(?:\r\n|\r|\n)/g, '<br />');
    },
  },

并调用如下函数：<p>{{ handleNewLine(item.licensedocument.legal.documentText) }}</p> 输出相同：

GENERAL SERVICE AGREEMENT\n\nTHIS GENERAL SERVICE AGREEMENT (the "Agreement") dated this 22nd day of June, 2018\nBETWEEN:\nCLIENT\n______________________\n______________________________\nCONTRACTOR\n______________________\n______________________________\nBACKGROUND\nThe Client is of the opinion that the Contractor has the necessary qualifications, experience and abilities to provide services to the Client.\nThe Contractor is agreeable to providing such services to the Client on the terms and conditions set out in this Agreement.\nIN CONSIDERATION OF the matters described above and of the mutual benefits and obligations set forth in this Agreement, the receipt and sufficiency of which consideration is hereby acknowledged, the Client and the Contractor (individually the "Party" and collectively the "Parties" to this Agreement) agree as follows:\n\nSERVICES PROVIDED \nThe Client hereby agrees to engage the Contractor to provide the Client with the following services (the "Services"):

---

我也调用 like<p v-html="handleNewLine(item.licensedocument.legal.documentText)"></p>和<p v-html="item.licensedocument.legal.documentText.replace(/(?:\r\n|\r|\n)/g, '<br />')"></p>replace() 仍然不起作用。输出：

GENERAL SERVICE AGREEMENT\n\nTHIS GENERAL SERVICE AGREEMENT (the "Agreement") dated this 22nd day of June, 2018\nBETWEEN:\nCLIENT\n______________________\n______________________________\nCONTRACTOR\n______________________\n______________________________\nBACKGROUND\nThe Client is of the opinion that the Contractor has the necessary qualifications, experience and abilities to provide services to the Client.\nThe Contractor is agreeable to providing such services to the Client on the terms and conditions set out in this Agreement.\nIN CONSIDERATION OF the matters described above and of the mutual benefits and obligations set forth in this Agreement, the receipt and sufficiency of which consideration is hereby acknowledged, the Client and the Contractor (individually the "Party" and collectively the "Parties" to this Agreement) agree as follows:\n\nSERVICES PROVIDED \nThe Client hereby agrees to engage the Contractor to provide the Client with the following services (the "Services"):

---

刚刚找到一个名为Nl2br的 npm 包，但仍然不起作用。输出是一样的：

GENERAL SERVICE AGREEMENT\n\nTHIS GENERAL SERVICE AGREEMENT (the "Agreement") dated this 22nd day of June, 2018\nBETWEEN:\nCLIENT\n______________________\n______________________________\nCONTRACTOR\n______________________\n______________________________\nBACKGROUND\nThe Client is of the opinion that the Contractor has the necessary qualifications, experience and abilities to provide services to the Client.\nThe Contractor is agreeable to providing such services to the Client on the terms and conditions set out in this Agreement.\nIN CONSIDERATION OF the matters described above and of the mutual benefits and obligations set forth in this Agreement, the receipt and sufficiency of which consideration is hereby acknowledged, the Client and the Contractor (individually the "Party" and collectively the "Parties" to this Agreement) agree as follows:\n\nSERVICES PROVIDED \nThe Client hereby agrees to engage the Contractor to provide the Client with the following services (the "Services"):

Answer 1

• 您确实应该使用， v-html因为使用时{{ var }}您的<br>'s 将作为 HMTL 实体可见 ( <br>)
• 你的正则表达式是不必要的复杂。随着(?:)你使用一个非捕获组，你不要在这种情况下，需要：/\r*\n/g将在这种情况下，充足
• 如果从字面上插入反斜杠\n（如在 JSON 表示中）获取文本字符串，则需要将其与前面的额外反斜杠匹配：然后您的正则表达式变为：/(\\r)*\\n/g
• 使用像您一样的方法很好，但您也可以使用计算：

computed: {
  withBrTags: function() {
    const doc = this.item.licensedocument.legal.documentText
    return doc.replace(/(\\r)*\\n/g, '<br>')
  }
}

Answer 2

使用v-html 是危险的，使用methods等等是没有意义的。

其实一切都很简单：

在 CSS 中使用

.text-block {
    white-space: pre; // or pre-line
}

在 Vue/Nuxt/JavaScript 中，使用string+\n

data: {
   text: 'Lorem ipsum dolor sit amet, \n consectetur adipisicing elit. \n Consequatur, nesciunt?'
}

在.vue模板中

<div class="text-block">
    {{ text }}
</div>

Answer 3

来自关于原始 HTML 插值的Vue 文档：

双胡子将数据解释为纯文本，而不是 HTML。为了输出真正的 HTML，你需要使用 v-html 指令

<p v-html="item.licensedocument.legal.documentText.replace(/(?:\r\n|\r|\n)/g, '<br />')"></p>

或者，在使用您的方法时：

<p v-html="handleNewLine(item.licensedocument.legal.documentText)"></p>

Answer 4

如果你只想将 \n 字符替换为新行，你可以简单地使用 CSS 和 property white-space。

.white-space {
  width: 200px;
  margin: 10px;
  border: 1px solid red;
  
  span {
    color: red;
  }
}

.pre-line {
  white-space: pre-line;
}

<div class="white-space pre-line">
  <span>pre-line</span>
      Sequences of white space are collapsed    .
  Lines are broken at newline characters, at <br>&lt;br&gt;, and as necessary to fill line boxes.
</div>