Hướng dẫn parse html-react

Question

html-react-parser

Nội dung chính

Nội dung chính Show

html-react-parser
htmlparser2
Is this XSS safe?
Does invalid HTML get sanitized?
Are

The replace callback's first argument is domhandler's node:

parse('
', {
  replace: domNode => {
    console.dir(domNode, { depth: null });
  }
});

Console output:

Element {
  type: 'tag',
  parent: null,
  prev: null,
  next: null,
  startIndex: null,
  endIndex: null,
  children: [],
  name: 'br',
  attribs: {}
}

The element is replaced if a valid React element is returned:

parse('text
', {
  replace: domNode => {
    if (domNode.attribs && domNode.attribs.id === 'replace') {
      return <span>replaced</span>;
    }
  }
});

replace with TypeScript

For TypeScript projects, you may need to check that domNode is an instance of domhandler's Element:

import { HTMLReactParserOptions, Element } from 'html-react-parser';

const options: HTMLReactParserOptions = {
  replace: domNode => {
    if (domNode instanceof Element && domNode.attribs) {
      // ...
    }
  }
};

If you're having issues take a look at our Create React App example.

replace element and children

Replace the element and its children (see demo):

import parse, { domToReact } from 'html-react-parser';

const html = `
  
    
      keep me and make me pretty!
    
  
`;

const options = {
  replace: ({ attribs, children }) => {
    if (!attribs) {
      return;
    }

    if (attribs.id === 'main') {
      return <h2 style={{ fontSize: 42 }}>{domToReact(children, options)}</h2>;
    }

    if (attribs.class === 'prettify') {
      return (
        <span style={{ color: 'hotpink' }}>
          {domToReact(children, options)}
        </span>
      );
    }
  }
};

parse(html, options);

HTML output:

<h2 style="font-size:42px">
  <span style="color:hotpink">
    keep me and make me pretty!
  span>
h2>

replace element attributes

Convert DOM attributes to React props with attributesToProps:

import parse, { attributesToProps } from 'html-react-parser';

const html = `
  
`;

const options = {
  replace: domNode => {
    if (domNode.attribs && domNode.name === 'main') {
      const props = attributesToProps(domNode.attribs);
      return <div {...props} />;
    }
  }
};

parse(html, options);

HTML output:

<div class="prettify" style="background:#fff;text-align:center">div>

replace and remove element

Exclude an element from rendering by replacing it with :

parse('
', {
  replace: ({ attribs }) => attribs && attribs.id === 'remove' && <></>
});

HTML output:

library

The library option specifies the UI library. The default library is React.

To use Preact:

parse('
', {
  library: require('preact')
});

Or a custom library:

parse('
', {
  library: {
    cloneElement: () => {
      /* ... */
    },
    createElement: () => {
      /* ... */
    },
    isValidElement: () => {
      /* ... */
    }
  }
});

htmlparser2

htmlparser2 options do not work on the client-side (browser) and only works on the server-side (Node.js). By overriding htmlparser2 options, universal rendering can break.

Default htmlparser2 options can be overridden in >=0.12.0.

To enable xmlMode:

parse('
', {
  htmlparser2: {
    xmlMode: true
  }
});

trim

By default, whitespace is preserved:

parse('
\n'); // [React.createElement('br'), '\n']

But certain elements like

will strip out invalid whitespace:

parse('

\n

'); // React.createElement('table')

To remove whitespace, enable the trim option:

parse('
\n', { trim: true }); // React.createElement('br')

However, intentional whitespace may be stripped out:

parse(' 
', { trim: true }); // React.createElement('p')

Migration

v3.0.0

domhandler has been upgraded to v5 so some parser options like normalizeWhitespace have been removed.

v2.0.0

Since v2.0.0, Internet Explorer (IE) is no longer supported.

v1.0.0

TypeScript projects will need to update the types in v1.0.0.

For the replace option, you may need to do the following:

import { Element } from 'domhandler/lib/node';

parse('
', {
  replace: domNode => {
    if (domNode instanceof Element && domNode.attribs.class === 'remove') {
      return <></>;
    }
  }
});

Since v1.1.1, Internet Explorer 9 (IE9) is no longer supported.

FAQ

Is this XSS safe?

No, this library is not XSS (cross-site scripting) safe. See #94.

Does invalid HTML get sanitized?

No, this library does not sanitize HTML. See #124, #125, and #141.

Are

Don't change case of tags

Tags are lowercased by default. To prevent that from happening, pass the htmlparser2 option:

const options = {
  htmlparser2: {
    lowerCaseTags: false
  }
};
parse('', options); // React.createElement('CustomElement')

Warning: By preserving case-sensitivity of the tags, you may get rendering warnings like:
Warning:  is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

See #62 and example.

export 'default' (imported as 'parse') was not found in 'html-react-parser'

Then update your Webpack config to:

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    mainFields: ['browser', 'main', 'module']
  }
};

See #238 and #213.

Performance

Run benchmark:

Output of benchmark run on MacBook Pro 2017:

html-to-react - Single x 415,186 ops/sec ±0.92% (85 runs sampled)
html-to-react - Multiple x 139,780 ops/sec ±2.32% (87 runs sampled)
html-to-react - Complex x 8,118 ops/sec ±2.99% (82 runs sampled)

Run Size Limit: