Hướng dẫn react html parser typescript

Question

2.0.2 • Public • Published a year ago

Nội dung chính Show

Installation
index.d.ts
Additional Details
html-react-parser
htmlparser2
Is this XSS safe?
Does invalid HTML get sanitized?
Are

parse('single
');

Parse multiple elements:

parse('Item 1
Item 2
');

Make sure to render parsed adjacent elements under a parent element:

<ul>
  {parse(`
    Item 1
    Item 2
  `)}
</ul>

Parse nested elements:

parse('Lorem ipsum
');

Parse element with attributes:

parse(
  '
'
);

replace

The replace option allows you to replace an element with another element.

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

Attributes aren't getting called

The reason why your HTML attributes aren't getting called is because inline event handlers (e.g., onclick) are parsed as a string rather than a function. See #73.

Parser throws an error

If the parser throws an erorr, check if your arguments are valid. See "Does invalid HTML get sanitized?".

Is SSR supported?

Yes, server-side rendering on Node.js is supported by this library. See demo.

Elements aren't nested correctly

If your elements are nested incorrectly, check to make sure your HTML markup is valid. The HTML to DOM parsing will be affected if you're using self-closing syntax (/>) on non-void elements:

parse(''); // returns single element instead of array of elements

See #158.

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.

TS Error: Property 'attribs' does not exist on type 'DOMNode'

The TypeScript error occurs because DOMNode needs be an instance of domhandler's Element. See migration or #199.

Can I enable trim for certain elements?

Yes, you can enable or disable trim for certain elements using the replace option. See #205.

Webpack build warnings

If you see the Webpack build warning:

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:

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Enterprise

Available as part of the Tidelift Subscription.

The maintainers of html-react-parser and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source packages you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact packages you use. Learn more.

Support

GitHub Sponsors
Open Collective
Tidelift
Patreon
Ko-fi
Liberapay
Teepsring

License

MIT

programming html Html-react-parser html-react-parser yarn Node html parser React-jsx-parser HTML parser

Hướng dẫn react html parser typescript

single

replace

replace with TypeScript

replace element and children

replace element attributes

replace and remove element

library

htmlparser2

trim

Migration

v3.0.0

v2.0.0

v1.0.0

FAQ

Is this XSS safe?

Does invalid HTML get sanitized?

Parser throws an error

Is SSR supported?

Elements aren't nested correctly

Don't change case of tags

TS Error: Property 'attribs' does not exist on type 'DOMNode'

Can I enable trim for certain elements?

Webpack build warnings

Performance

Contributors

Code Contributors

Financial Contributors

Individuals

Organizations

Enterprise

Support

License

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội