javascript - 如何使用 Aurelia 将换行符呈现为 标记

Question

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

问题实现此目标的“正确”/“推荐”方法是什么？

我尝试过的选项:

• 正常绑定(bind):<p>${myText}</p> : 不呈现换行符
• 使用 <pre> : <p><pre>${myText}></pre></p> : 呈现换行符，但具有长 <pre> 的所有已知和喜爱的问题文本，例如某些浏览器中的水平滚动和次优分词。
• 通常使用将换行符替换为 <br> 的值转换器进行绑定(bind)标签: <p>${myText | textFormat}</p>

export class TextFormatValueConverter {
  toView(value) {
    return value.replace(new RegExp('\r?\n','g'), '<br>');
  }
}

这确实呈现了 <br>标签，但 Aurelia Binder 转义标签并将它们作为文字文本显示给用户。 * 使用上述转换器和 innerHTML 进行绑定(bind):<p innerHTML.bind="myText | textFormat"></p> : 呈现正常，但我担心它可能容易受到攻击，因为文本来自遗留系统，该系统没有对网络使用进行任何输入清理。

Answer 1

你所做的是正确的。有时需要绑定(bind)到 innerHTML。 aurelia.io 处的文档包括使用 sanitizer 转换器的说明和关于使用 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>