将 <p> 转换为 <p> 并用于格式化 html

Question

Web 服务正在以这种格式向我的应用程序返回数据（不幸的是，我无法控制服务器输出）：

&lt;p&gt; This is a paragraph &lt;/p&gt;

当尝试使用 innerHtml 显示此数据时，结果如下

<p>This is a paragraph</p>

我如何 'pass on' 格式化到浏览器以便它解释段落标记并显示它？

Whosebug 解释 <p>:

这是一个段落

一个 plunker 来演示 https://plnkr.co/edit/BbAVrT8F1rJGZnJmov1g?p=preview，下面也列出了代码。

@Component({
  selector: 'my-app',
  template: `
    <div [innerHtml] = "name">
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `&lt;p&gt;This is a paragraph&lt;/p&gt;`
  }
}

我试过 <script>decodeURI({{name}})</script> 但那只是 returns <".

我也查看了其他堆栈问题并尝试了绕过 html 安全性的管道，但没有奏效。阅读 Angular2 文档听起来这不是它的目的。我也尝试了样式覆盖，但失败了，因为这不是样式，它是纯粹的 html:

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value: string) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

Answer 1

你首先需要解码那些实体引用，你可以让浏览器为你做这件事，就像我下面的代码示例一样。让我们假设 getData() returns 一个 Observable 其中包含您的数据

.
.
.
class SomeClass ... {
  dataBoundProperty: string;

  someFunction() {
    this.dataService.getData()
            .subscribe(dataStr => {
                let dummyElem = document.createElement('DIV');
                dummyElem.innerHTML = dataStr;
                document.body.appendChild(dummyElem);
                this.dataBoundProperty = dummyElem.textContent; // just grap the decoded string which contains the desired HTML tags
                document.body.removeChild(dummyElem);
            });
  }
}

Answer 2

我根据@Dummy 的 post 创建了这个函数。它位于组件内部，并从 html.

调用

export class SomeComponent {
    public dummyElem = document.createElement('DIV');

...

  decode(text: string): string {    
    var ret:string = "";

    this.dummyElem.innerHTML = text;
    document.body.appendChild(this.dummyElem);
    ret = this.dummyElem.textContent; // just grap the decoded string which contains the desired HTML tags
    document.body.removeChild(this.dummyElem);

    return ret;
  }    
}

呼叫html

<div [innerHtml]="decode(object.value)"></div>

'feel' 不是很优雅或正确，但它确实有效。

Answer 3

我会参考 DOMParser 接口的 parseFromString() 方法更多细节可以找到here

无论您使用什么框架，我们都假设 this.value = 是一个包含 '<p>' elements.First 的字符串，我们需要使用 new DOMParser() 和 parseFromString 将其转换为 html方法比我们可以引用 document.body.firstChild.data 这是一个 HTML 字符串转换比我们可以轻松地将它添加为子元素或使用 innerHTML 将其预填充到 html 元素.

if (this.value && this.value.length) {
        let html = '';
        let parser = new DOMParser();
        let doc = parser.parseFromString(this.value, 'text/html');
        html = doc.body.firstChild.data;
        let target = this.template.querySelector('.converter');
        if (target) {
            target.innerHTML = html;
        }
    }

将 <p> 转换为 <p> 并用于格式化 html

Convert <p> to <p> and use to format html

html

javascript

html-encode

angular

将 <p> 转换为 <p> 并用于格式化 html

Convert &lt;p&gt; to <p> and use to format html

html

javascript

html-encode

angular

Convert <p> to <p> and use to format html