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 {{ item.licensedocument.legal.documentText.replace(/(?:\r\n|\r|\n)/g, ' ') }} 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 {{ item.licensedocument.legal.documentText }} 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: {{ handleNewLine(item.licensedocument.legal.documentText) }} 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  and ')"> 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"):

Also can simply use css: https://stackoverflow.com/questions/49264645/vuejs-newline-character-is-not-rendered-correctly/49264975#49264975 — Lawrence Cherone, Mar 04 '19 at 08:44

score 7 · Accepted Answer · answered Mar 04 '19 at 09:18

You should indeed use v-html because when using {{ var }} your  's will be visible as HMTL entities ( )
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>')
  }
}

Thank you, this is the most correct and most complete answer I could found. — Tarabass, Jul 10 '20 at 13:06

Pavel Levin · Answer 2 · 2021-02-10T12:59:27.630

6

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>

edited Feb 10 '21 at 12:59

answered Oct 22 '20 at 10:46

Pavel Levin

408
6
6

Using a knife is dangerous too, yet using cutlery for dining is so much more convenient and common than using your hands. `v-html` is perfectly fine to use when the data is hardcoded or the source of the data passed to it is known to be secure. Using a CSS-only solution doesn't work for non-human users when doing server-side rendering (e.g. Google bot) and sanitizing the string is a separate process that should be taken care of before the string is outputted – Tyblitz Apr 19 '21 at 20:20

score 5 · Answer 3 · answered Mar 04 '19 at 08:41

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>

score 1 · Answer 4 · answered Jan 20 '21 at 01:43

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>

This should be the answer. Thank you, sir! – D. Kermott Mar 06 '21 at 22:30 — D. Kermott, Mar 06 '21 at 22:30

score 0 · Answer 5 · answered Jan 29 '21 at 09:08

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>

replace \n to new line on vuejs

5 Answers5

In fact, everything is simple:

Linked