将\ n替换为vuejs上的新行 [英] replace \n to new line on vuejs

问题描述

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

I am trying to replace \n characters to new line of a data which comes from endpoint.

我尝试了<p>{{ item.licensedocument.legal.documentText.replace(/(?:\r\n|\r|\n)/g, '<br />') }}</p>，但没有成功.当我在问题的末尾写入replace()时，花括号停止工作并且从不像JS那样工作. 输出如下:

I tried <p>{{ item.licensedocument.legal.documentText.replace(/(?:\r\n|\r|\n)/g, '<br />') }}</p> and didn’t worked. Curly brackets stoped working and never acting like JS when i write replace() to the end of the prob. Output is like:

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

---

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

---

When I write just <p>{{ item.licensedocument.legal.documentText }}</p> it works and output is like

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"):

---

我还尝试添加一种方法，例如:

---

I also tried to add a method like:

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

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

And called the function like: <p>{{ handleNewLine(item.licensedocument.legal.documentText) }}</p> And output was same:

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()仍然不起作用.输出:

---

I also call like <p v-html="handleNewLine(item.licensedocument.legal.documentText)"></p> and <p v-html="item.licensedocument.legal.documentText.replace(/(?:\r\n|\r|\n)/g, '<br />')"></p> and replace() still doesn't work. Output:

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软件包，但仍然无法正常工作. 输出是相同的:

---

Just found an npm package named Nl2br but still doesn't work. Output is same:

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"):

推荐答案

• 您应该确实使用 v-html，因为使用{{ var }}时，您的<br>将作为HMTL实体(<br>)可见
• 您的正则表达式不必要地复杂.在(?:)中，您正在使用非捕获组，在这种情况下您不需要:/\r*\n/g在这种情况下就足够了
• 如果您获得的文本字符串的字面带有反斜杠\n(如JSON表示形式)，则需要将其与前面的反斜杠进行匹配:您的正则表达式将变为:/(\\r)*\\n/g
• 使用像您一样的方法很好，但是您也可以使用计算型:
• You should indeed use v-html because when using {{ var }} your <br>'s will be visible as HMTL entities (<br>)
• Your regex is needlessly complex. With (?:) you are using a non-capturing group, which you don't need in this case: /\r*\n/g will be sufficient in this case
• If you get the text string literally with the backslash inserted \n (as in JSON representation), you need to match it with an extra preceding backslash: then your regex becomes: /(\\r)*\\n/g
• Using a method like you did is fine, but you can also use computed:

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

这篇关于将\ n替换为vuejs上的新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！