在Vue.js上将\n替换为新行
在Vue.js上将\n替换为新行
我正在尝试将来自终端点的数据中的\n字符替换为新行。
我尝试使用{{ item.licensedocument.legal.documentText.replace(/(?:\r\n|\r|\n)/g, '，但没有起作用。花括号停止工作，不像JS那样在prob的末尾写replace()时。
') }}
输出结果如下：
{{ 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, '');
},
},
并像这样调用函数：{{ 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"):
问题的出现原因是在Vue.js中使用{{ var }}输出时，<br>会作为HTML实体显示，而不会被解析为换行符。解决方法是使用v-html指令或者使用computed属性来替代{{ var }}输出，并使用正则表达式将\n替换为换行标签<br>。
在使用v-html指令时，需要注意不要输出来自不可信源的未经过处理的用户输入或HTML。对于这些情况，可以对值进行预处理，或者参考Pavel Levin的答案中提供的原始解决方案。
另外，代码中的正则表达式可以简化为/\r*\n/g，不需要使用(?:)来创建非捕获组。如果文本字符串中含有插入了反斜杠的\n（比如JSON表示），则需要在正则表达式中匹配额外的反斜杠，即/(\\r)*\\n/g。
除了使用方法对文本进行处理，还可以使用computed属性来实现。例如：
computed: {
withBrTags: function() {
const doc = this.item.licensedocument.legal.documentText
return doc.replace(/(\\r)*\\n/g, '<br>')
}
}
以上是关于在Vue.js中将\n替换为换行标签<br>的问题的原因和解决方法。感谢提供这个最准确和最完整答案的作者。
使用v-html是危险的，使用methods等是没有意义的。
事实上，一切都很简单：
在CSS中使用white-space: pre; // or pre-line
在Vue/Nuxt/JavaScript中使用string + \n
在.vue模板中使用<div class="text-block">{{ text }}</div>
使用刀具也是危险的，但使用餐具吃饭比用手方便和常见得多。当数据是硬编码的或者传递给v-html的数据源是安全的时候，使用v-html是完全可以的。使用纯CSS的解决方案在进行服务器端渲染时（如Google机器人）对非人类用户无效，对字符串进行消毒是一个独立的过程，应在输出字符串之前处理好。
我认为，这是一个避免使用v-html的最佳解决方案。
从Vue文档中可以得知，双花括号会将数据解释为纯文本，而不是HTML。为了输出真正的HTML，需要使用v-html指令。根据代码可以看出，问题是如何将字符串中的换行符替换为HTML的换行标签。解决方法是使用JavaScript的replace()方法，将字符串中的换行符替换为
标签。代码中使用了正则表达式/(?:\r\n|\r|\n)/g，可以匹配Windows、Mac和Linux系统下的换行符，然后使用replace()方法将其替换为
标签。另一种解决方法是在Vue组件中定义一个方法handleNewLine，将字符串中的换行符替换为
标签，然后将这个方法绑定到v-html指令上。使用这两种方法中的任意一种，都可以实现将字符串中的换行符替换为HTML的换行标签。