Javascript 如何将换行符渲染为<；br>；金黄色标签

我正在使用JSON检索一些文本数据，这些数据包括使用换行符格式化的文本。我非常希望向用户呈现这些换行符

问题：实现这一目标的“正确”/“推荐”方法是什么

我尝试过的选项：

• 正常绑定：

  ${myText}
  

  ：不呈现换行符
• 使用
  ：

  ${myText}>
  

  ：渲染换行符，但存在长
  文本的所有已知和喜爱的问题，如某些浏览器中的水平滚动和不理想的分词

<p innerHTML.bind=“htmlText”>${myText}</p>

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`;
}

• 通常使用valueConverter进行绑定，该转换器使用
  标记替换换行符：

  ${myText | textFormat}
  

导出类TextFormatValueConverter{
toView（值）{
返回值.replace（新的RegExp（'\r？\n'，'g'），'
'）；
}
}

这确实呈现了

标记，但Aurelia活页夹会转义这些标记，并将它们作为文本显示给用户。

---

*使用上述转换器和innerHTML进行绑定：

：呈现正常，但我担心它可能容易受到攻击，因为这些文本来自一个遗留系统，该系统没有对web的使用进行任何输入清理

问题是Aurelia将转换后的HTML呈现为转义标记。要解决此问题，只需使用RegExp函数将其转换为

，然后像这样使用innerHTML绑定：

${myText}

这将阻止Aurelia转义HTML。我知道您担心使用这种方法，因为您担心可能会有不好的HTML，但是没有其他方法可以解决这个问题，因为您不能告诉Aurelia只呈现特定的标记

---

如果您担心可能会出现糟糕的HTML，为什么不编写一段自定义JS来在页面加载后取消所有

标记的显示？（丑得要命，但我看不出别的办法。）

你所做的是正确的。有时需要绑定到

innerHTML

。位于的文档包括有关使用消毒转换器的说明，以及关于使用项目的更完整实现的说明

也就是说，您可以创建一个真正轻量级的自定义属性，它只执行您需要的操作：

保留中断。js

从“aurelia框架”导入{inject}；
函数htmlEncode（html）{
return document.createElement（'a'）。appendChild（
document.createTextNode（html））.parentNode.innerHTML；
}
@注入（元素）
导出类属性{
构造函数（元素）{
this.element=元素；
}
valueChanged（）{
设html=htmlEncode（this.value）；
html=html.replace（/\r/g'）。replace（/\n/g'）；
this.element.innerHTML=html；
}
}

app.js

导出类应用程序{
message=`这是我的文本
它有一些断线
还有一些邪恶的javascript
换行符替换为
标记`；
}

app.html

我找到了解决方案：

---

在父元素上使用

style=“white space:pre-wrap；”“

修复了问题。

转换器如何？谢谢：）不知道这个问题。因此，一个可能的解决方案是通过管道连接消毒剂，或者只是扩展我自己的转换器以包括卫生设施。我确实相信innerHtml绑定中包含了一些卫生设施（查看上面链接的代码，似乎只是这里停止的脚本，我相信innerHtml默认情况下会保护它（尽管可能是错误的）.我还没有足够的知识来说明保护脚本标签是否足够好，或者是否应该考虑更多的保护..请看，其中的共识是“不，他们不应该”！@AndreasNiedermair。这就是其中之一。@JeremyDanyow这不是应该使用标记的情况之一，而是应该以标题的完整句子作为目标…标记永远都不是办法！是否可以使用一个函数，用安全标记替换所有标记，并将BR的返回为不安全，然后绑定该to innerHTML。这基本上可以解决问题，对吗？（我没有奥雷莉亚的经验）为什么会投否决票？被接受的答案完全符合我的建议，但保持车厢返回，而不是与未被替换的车厢一起工作。没有线索，不是我…猜海报有恶意：-/它也可以作为自定义元素吗？

${myText}

或者这会带来很多开销吗？考虑一下，属性很有意义，因为它可以在不同的元素上重用。对-对于类似的东西，属性更灵活，但自定义元素也可以。更好的正则表达式是：

html.replace（/（？：\r\n | \r | \n）/g，
；