Question

我正在尝试将\ n字符替换为来自端点的数据的新行。

我尝试了{{ item.licensedocument.legal.documentText.replace(/(?:\r\n|\r|\n)/g, ' ') }}，但没有成功。当我在问题的末尾写入replace（）时，花括号停止工作并且从不像JS那样工作。输出如下：

    {{ item.licensedocument.legal.documentText.replace(/(?:\r\n|\r|\n)/g, '
') }}

当我只写{{ item.licensedocument.legal.documentText }}时，它的工作原理和输出就像

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

并调用如下函数：{{ handleNewLine(item.licensedocument.legal.documentText) }} 输出是相同的：

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

我也像和')">那样打电话，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"):

Answer 1

来自Raw HTML interpolation上的Vue文档：

双胡须将数据解释为纯文本，而不是HTML。在为了输出真实的HTML，您将需要使用v-html指令

AVCaptureVideoDataOutputSampleBufferDelegate

或者，当使用您的方法时：

func captureOutput(
    _ output: AVCaptureOutput,
    didOutput sampleBuffer: CMSampleBuffer,
    from connection: AVCaptureConnection
    ) {

    DispatchQueue.main.async {
        self.updatePreviewOverlayView()
    }

    guard let imageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer) else { return }
    self.lastFrame = sampleBuffer
    let visionImage = VisionImage(buffer: sampleBuffer)
    let metadata = VisionImageMetadata()
    let visionOrientation = VisionDetectorImageOrientation.rightTop
    metadata.orientation = visionOrientation
    visionImage.metadata = metadata
    let imageWidth = CGFloat(CVPixelBufferGetWidth(imageBuffer))
    let imageHeight = CGFloat(CVPixelBufferGetHeight(imageBuffer))
    self.recognizeTextOnDevice(in: visionImage, width: imageWidth, height: imageHeight)
}

Answer 2

您应该确实使用 v-html，因为使用{{ var }}时，您的 将显示为HMTL实体（{ {1}}）
您的正则表达式不必要地复杂。使用 时，您使用的是non-capturing group，在这种情况下您不需要：(?:)就足够了
如果获取的文本字符串的字面带有反斜杠/\r*\n/g（如JSON表示形式），则需要将其与前面的反斜杠匹配：然后您的正则表达式将变为：\n
使用像您一样的方法很好，但是您也可以使用计算型：

/(\\r)*\\n/g

Answer 3

如果您只想将 \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>

Answer 4

使用v-html 是危险的，而使用methods等是毫无意义的。

事实上，一切都很简单：

在CSS中使用

.text-block {
    white-space: pre;
}

在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>

Answer 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上的新行

5 个答案:

事实上，一切都很简单：