replace \n to new line on vuejs

Question

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

---

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

---

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

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

---

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

---

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

Answer 1

Using v-html is dangerous , and using methods and so on is pointless .

In fact, everything is simple:

Use in CSS

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

in Vue/Nuxt/JavaScript, use string + \n

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

in .vue template

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

Answer 2

• You should indeed use v-html because when using {{ var }} your <br> 's will be visible as HMTL entities ( <br> ). Do not use to output unsanitized user input or HTML from an untrusted source. For those cases, do preprocessing on the value or look at Pavel Levin's answer for an original solution.
• 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>')
  }
}

Answer 3

From Vue docs on Raw HTML interpolation :

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>

or, when using your method:

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

Answer 4

if you just want to replace \n characters to a new line, you can simply use CSS, with 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>

Answer 5

You should avoid v-html . The best way to implement line breaks output is by using directives

 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>