将 \\n 替换为 vuejs 上的新行

Question

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

---

我尝试 <p>{{ item.licensedocument.legal.documentText.replace(/(?:\r\n|\r|\n)/g, '<br />') }}</p> 但没有用。当我将 replace() 写到概率的末尾时，大括号停止工作并且从不像 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"):

---

我也调用 <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"):

原文由 user10736003 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

• You should indeed use v-html because when using {{ var }} your <br> ’s will be visible as HMTL entities ( <br> ).不要用于从不受信任的来源输出未经过滤的用户输入或 HTML。对于这些情况，请对值进行预处理或查看 Pavel Levin 的答案 以获取原始解决方案。
• 您的正则表达式不必要地复杂。使用 (?:) 您正在使用 非捕获组，在这种情况下您不需要： /\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>')
  }
}

原文由 webketje 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Pavel Levin 发布，翻译遵循 CC BY-SA 4.0 许可协议