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

回答1:

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

回答2:

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>

来源：https://stackoverflow.com/questions/54979287/replace-n-to-new-line-on-vuejs

标签

javascript

html

Vue.js

newline