如何使用Aurelia将换行符呈现为<br>标记
我正在使用JSON检索一些文本数据，这些数据包括用换行符格式化的文本。我非常想将这些行中断呈现给用户。
问题：实现这一目标的“正确”/“推荐”方法是什么？
我尝试过的选择：
- 绑定：
<p>${myText}</p>：不呈现换行符 - 使用
<pre>：<p><pre>${myText}></pre></p>：呈现换行符，但是有所有已知和喜爱的长<pre>文本问题，比如在某些浏览器中水平滚动和不太理想的分词。 - 绑定通常使用用valueConverter标记替换换行的
<br>：<p>${myText | textFormat}</p>
export class TextFormatValueConverter {
toView(value) {
return value.replace(new RegExp('\r?\n','g'), '<br>');
}
}这确实呈现了<br>标记，但是Aurelia将转义这些标记，并将它们显示为文字文本给用户。*使用上述转换器和innerHTML：<p innerHTML.bind="myText | textFormat"></p>进行绑定:呈现ok，但我担心它可能容易受到攻击，因为这些文本来自一个遗留系统，该系统不对web的使用进行任何输入疗养。
回答 3
Stack Overflow用户
发布于 2016-01-15 12:40:07
你所做的是正确的。绑定到innerHTML有时是必要的。aurelia.io的文档包括使用消毒转换器的说明和使用sanitize-html项目使用更完整的实现的说明。
也就是说，您可以创建一个非常轻量级的自定义属性，该属性只执行所需的任务：
http://plnkr.co/edit/qykvo9PKAD0TawTlQ5sp?p=preview
preserve-breaks.js
import {inject} from 'aurelia-framework';
function htmlEncode(html) {
return document.createElement('a').appendChild(
document.createTextNode(html)).parentNode.innerHTML;
}
@inject(Element)
export class PreserveBreaksCustomAttribute {
constructor(element) {
this.element = element;
}
valueChanged() {
let html = htmlEncode(this.value);
html = html.replace(/\r/g, '').replace(/\n/g, '<br/>');
this.element.innerHTML = html;
}
}app.js
export class App {
message = `this is my text
it has some line breaks
and some <script>evil javascript</script>
the line breaks were replaced with <br/> tags`;
}app.html
<template>
<require from="./preserve-breaks"></require>
<div preserve-breaks.bind="message"></div>
</template>Stack Overflow用户
发布于 2016-01-15 11:38:59
问题是Aurelia将转换后的HTML呈现为转义标记。要解决这个问题，只需使用RegExp函数将其转换为<br>，然后使用innerHTML绑定，如下所示：
<p innerHTML.bind=“htmlText”>${myText}</p>这将阻止Aurelia转义HTML。我看到您担心使用这种方法，因为您担心在某个地方可能会出现错误的HTML，但是没有其他方法可以解决这个问题，因为您不能告诉Aurelia只呈现特定的标记。
如果您担心可能会出现错误的HTML，那么为什么不编写一段自定义JS来在页面加载后解除所有<br>标记呢？(丑得要命，但我看不见另一条路。)
Stack Overflow用户
发布于 2018-07-14 13:16:37
我找到了解决方案论吉乌布：在父元素修复问题上使用style="white-space: pre-wrap;"。
https://stackoverflow.com/questions/34808817
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号