如何编辑和呈现存储为字符串的内部 html？

Posted 2023-05-07

【中文标题】如何编辑和呈现存储为字符串的内部 html？

【英文标题】：How to edit and render inner html stored as a string?

【发布时间】：2018-09-22 14:37:02

【问题描述】：

我有一个来自字符串类型变量的 html sn-p。 考虑，以下语句存储为字符串类型变量，

displayContent =
    `<div>
        <img  src="image1.jpeg"/>
    </div>
    <div>
        <p>Some random text</p>
        <img  src="image2.jpeg"/>
        <p>Some random text again</p>
        <img  src="image3.jpeg"/>
        <p>Some random text</p>
    </div>`

现在，我必须在“displayContent”呈现为 html 文本的 HTML 页面中显示字符串变量“displayContent”。

我用过这个：<span [innerHTML]='displayContent'> 它在我的主 HTML 页面中精美地呈现了变量“displayContent”的 HTML 代码。

现在，来自某些来源的图像比我的页面尺寸大。我需要为每个<img /> 添加一个样式元素，例如<img style="max-width: 100%" />

要实现这一点，我们可以简单地在我们的 javascript 文件中使用 replace() 作为 displayContent = displayContent.replace(/<img/gi,'<img style="max-width: 100%" ')

所以，我们的新“displayContent”变成了

`<div>
    <img style="max-width: 100%"  src="image1.jpeg"/>
</div>
<div>
    <p>Some random text</p>
    <img style="max-width: 100%"  src="image2.jpeg"/>
    <p>Some random text again</p>
    <img style="max-width: 100%"  src="image3.jpeg"/>
    <p>Some random text</p>
</div>`

现在，当我使用 <span [innerHTML]='displayContent'> 它不会以任何方式缩放我的图像。 图像仍然是原始大小。

此外，浏览器的开发人员工具中的图像样式属性没有更新。 Click here to see developer tools Styles

【问题讨论】：

正在使用...angular?

如果你使用 react 那么它将变成：style=maxWidth: "100%"

你尝试过上课吗？

@jonrsharpe 是的，我正在使用 Angular。

@TheSegfault 是的，我也尝试过使用类。

【参考方案1】：

我找到了（也许）一个解决方案here。

它说我们必须清理 HTML 以应用样式。

创建一个新管道：

import  Pipe, PipeTransform  from '@angular/core';
import  DomSanitizer  from "@angular/platform-browser";
@Pipe(
  name: 'safeHtml',
)
export class SafeHtmlPipe implements PipeTransform 

  constructor(private sanitizer:DomSanitizer)

  transform(html) 
    return this.sanitizer.bypassSecurityTrustHtml(html);
  

不要忘记在声明下将管道添加到模块中

@NgModule(
  declarations: [
    ...
    SafeHtmlPipe,
],

导入并使用：

<span [innerHTML]="displayContent | safeHtml">

【参考方案2】：

您必须使用DomSanitizer 将[innerHTML] 绑定到SafeHtml。

import  Component  from '@angular/core';
import  DomSanitizer, SafeHtml  from '@angular/platform-browser';

@Component(
  selector: 'my-app',
  template: `
   <div [style.width.px]="300">
     <div [innerHtml]="safeHTML"></div>
   </div>
  `,
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  html = '<img src="https://via.placeholder.com/1000x1000" style="max-width: 100%" />';

  get safeHTML(): SafeHtml 
    return this.sanitizer.bypassSecurityTrustHtml(this.html);
  

  constructor(private sanitizer: DomSanitizer)  

Live demo