javascript - Convert <p> to <p> and use to format html - Stack Overflow

admin管理员组

文章数量:1390634

A web service is returning data to my app in this format (unfortunately I have no control over the server output):

<p> This is a paragraph </p>

When trying to display this data using innerHtml the result is as follows

<p>This is a paragraph</p>

How do I 'pass on' the formatting to the browser so it interprets the paragraph tag and displays it?

Stackoverflow interpreting the <p>:

This is a paragraph

---

A plunker to demonstrate , code also listed below.

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

I have tried <script>decodeURI({{name}})</script> but that simply returns <".

I have also looked at other stack questions and tried a pipe to bypass the security of the html, which didn't work. Reading the Angular2 docs it sounds like that's not it's purpose. I also tried the style override, it failed as this is not a style, it's pure html:

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

A web service is returning data to my app in this format (unfortunately I have no control over the server output):

<p> This is a paragraph </p>

When trying to display this data using innerHtml the result is as follows

<p>This is a paragraph</p>

How do I 'pass on' the formatting to the browser so it interprets the paragraph tag and displays it?

Stackoverflow interpreting the <p>:

This is a paragraph

---

A plunker to demonstrate https://plnkr.co/edit/BbAVrT8F1rJGZnJmov1g?p=preview, code also listed below.

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

I have tried <script>decodeURI({{name}})</script> but that simply returns <".

I have also looked at other stack questions and tried a pipe to bypass the security of the html, which didn't work. Reading the Angular2 docs it sounds like that's not it's purpose. I also tried the style override, it failed as this is not a style, it's pure html:

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

• javascript
• html
• angular
• html-encode

Share Improve this question Follow asked Apr 30, 2017 at 23:40 RotsRots 5,58633 gold badges4646 silver badges5151 bronze badges 8

• Possible duplicate of What's the right way to decode a string that has special HTML entities in it? – Siguza Commented Apr 30, 2017 at 23:45
• It's innerHTML – Trash Can Commented May 1, 2017 at 1:46
• @Dummy I changed it on the plunker to be innerHTML, same result. – Rots Commented May 1, 2017 at 1:48
• @Siguza I'm working on implementing the he library with Angular2, based on the duplicate link. – Rots Commented May 1, 2017 at 1:49
• Please see my answer to see if it helps – Trash Can Commented May 1, 2017 at 1:51

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 2

You first need to decode those entity references, you can have the browser do this for you like in my code example below. Let's assume that getData() returns an Observable which contains your data

.
.
.
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);
            });
  }
}

I created this function based on @Dummy's post. It's inside of the ponent, and called from the 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;
  }    
}

Calling html

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

Doesn't 'feel' very elegant or correct, but it works.

I would refer to a The parseFromString() method of the DOMParser interface more details can be found here

Whatever framework you r using lets assume that this.value = is a string contains '&ltp&gt' elements.First we need to convert it to a html using new DOMParser() and parseFromString method than we can refer to a document.body.firstChild.data which is a HTML string converted than we can easy add it as a child or use innerHTML to prepand it to a html element.

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

本文标签： javascriptConvert ampltpampgt to ltpgt and use to format htmlStack Overflow