将 \n 替换为 vuejs 上的新行

Question

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

我尝试了 {{ item.licensedocument.legal.documentText.replace(/(?:\r\n|\r|\n)/g, ' ') }} 但没有成功。当我将 replace() 写到概率的末尾时，大括号停止工作并且从不像 JS 那样工作。输出如下：

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

当我只写 {{ item.licensedocument.legal.documentText }} 时它可以工作并且输出就像

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 />');
    },
  },

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

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

我也调用了  和 ')"> 并且 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

来自 Raw HTML interpolation 上的 Vue 文档：

The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive

<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 2

你应该确实使用v-html因为当使用{{ var }}时你的 将显示为 HMTL 实体 ( )。不要用于输出未经处理的用户输入或来自不受信任来源的 HTML。对于这些情况，请对值进行预处理或查看以获得原始解决方案。
您的正则表达式不必要地复杂。对于 (?:)，您使用的是 non-capturing group，在这种情况下您不需要：/\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 3

使用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 4

如果你只是想将\n字符替换为一个新行，你可以简单地使用CSS，与属性 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>

Answer 5

你应该避免 v-html。实现换行输出的最好方法是使用指令

var app = new Vue({
  el: '#app',
  data() {
    return {
      value: ' Text with break line.\n Next line.',
      value2: `Text with break line.
               Next line.`
    }
  },
  directives: {
    nl2br: {
      inserted(el) {
        // simplified example, 
        // works only for nodes without any child elements
        el.innerHTML = el.textContent.replace(/\n/g, '<br />')
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p v-nl2br>{{ value }}</p>
  <p v-nl2br>{{ value2 }}</p>
</div>

将 \n 替换为 vuejs 上的新行

replace \n to new line on vuejs

html

javascript

newline

vue.js

其实一切都很简单：