将 \n 替换为 vuejs 上的新行

Posted

技术标签:

【中文标题】将 \\n 替换为 vuejs 上的新行【英文标题】：replace \n to new line on vuejs将 \n 替换为 vuejs 上的新行 【发布时间】：2019-07-25 12:46:12 【问题描述】：

我正在尝试将 \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 />');
    ,
  ,

并像这样调用函数：&lt;p&gt; handleNewLine(item.licensedocument.legal.documentText) &lt;/p&gt; 输出是一样的：

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

我也像 &lt;p v-html="handleNewLine(item.licensedocument.legal.documentText)"&gt;&lt;/p&gt; 和 &lt;p v-html="item.licensedocument.legal.documentText.replace(/(?:\r\n|\r|\n)/g, '&lt;br /&gt;')"&gt;&lt;/p&gt; 一样打电话，而 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"):

【问题讨论】：

也可以简单的使用css：***.com/questions/49264645/… 【参考方案1】：

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

【讨论】：

用刀也很危险，但用餐具吃饭比用手方便和普遍得多。 v-html 非常适合在数据被硬编码或已知传递给它的数据源是安全的情况下使用。在进行服务器端渲染（例如 Google bot）时，使用纯 CSS 解决方案不适用于非人类用户，并且清理字符串是一个单独的过程，应该在输出字符串之前进行处理 我认为，如果我们想避免 v-html，这是最好的解决方案【参考方案2】： 您应该确实使用v-html，因为在使用 var 时，您的&amp;lt;br&amp;gt; 将作为HMTL 实体(&amp;lt;br&amp;gt;) 可见。不要用于从不受信任的来源输出未经处理的用户输入或 HTML。对于这些情况，请对值进行预处理或查看 Pavel Levin's answer 以获取原始解决方案。 您的正则表达式是不必要的复杂。对于(?:)，您使用的是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>')

【讨论】：

谢谢，这是我能找到的最正确、最完整的答案。【参考方案3】：

来自Raw HTML interpolation 上的 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>

【讨论】：

【参考方案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>

【讨论】：

这应该是答案。谢谢你，先生！【参考方案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 上的新行的主要内容，如果未能解决你的问题，请参考以下文章

PHP 用 <br/> 替换文字 \r\n （不替换新行）

Google 表格 - 创建新行时自动替换值

将"；br/"；（html标记）替换为php新行标记

如何在bash中将空格替换为新行[重复]

替换长json字符串中的新行符号[关闭]

javascript替换函数vuejs中缺少的字符