CODEWITHSUNDEEP
javascripthtmlvue.jsnewline
user10736003
user10736003

Reputation:

replace \n to new line on vuejs

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

Upvotes: 18

Views: 30210

Answers (5)

yuriy636
yuriy636

Reputation: 11661

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>

Upvotes: 7

webketje
webketje

Reputation: 10966

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

Upvotes: 9

Pavel Levin
Pavel Levin

Reputation: 746

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>

Upvotes: 30

Jman
Jman

Reputation: 936

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>

Upvotes: 1

Tom_chao
Tom_chao

Reputation: 51

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>

Upvotes: 5

Related Questions