html-react-parser
Nội dung chính
- html-react-parser
- htmlparser2
- Is this XSS safe?
- Does invalid HTML get sanitized?
- Are tags parsed?
- Attributes aren't getting called
- 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
HTML to React parser that works on both the server [Node.js] and the client [browser]:
HTMLReactParser[string[, options]]
The parser converts an HTML string to one or more React elements.
To replace an element with another element, check out the replace
option.
Example
const parse = require['html-react-parser']; parse['Hello, World!
']; // React.createElement['p', {}, 'Hello, World!']
Replit | JSFiddle | CodeSandbox | TypeScript | Examples
Table of Contents- Install
- Usage
- replace
- replace with TypeScript
- replace element and children
- replace element attributes
- replace and remove element
- library
- htmlparser2
- trim
- replace
- Migration
- v3.0.0
- v2.0.0
- v1.0.0
- FAQ
- Is this XSS safe?
- Does invalid HTML get sanitized?
- Are
tags parsed?
- Attributes aren't getting called
- 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
Install
NPM:
npm install html-react-parser --save
Yarn:
yarn add html-react-parser
CDN:
window.HTMLReactParser[/* string */];
Usage
Import or require the module:
// ES Modules import parse from 'html-react-parser'; // CommonJS const parse = require['html-react-parser'];
Parse single element:
parse['single
'];
Parse multiple elements:
parse['Item 1 Item 2 '];
Make sure to render parsed adjacent elements under a parent element:
{parse[`Item 1 Item 2 `]}
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 replaced; } } }];
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 {domToReact[children, options]}; } if [attribs.class === 'prettify'] { return [ {domToReact[children, options]} ]; } } }; parse[html, options];
HTML output:
keep me and make me pretty!
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 ; } } }; parse[html, options];
HTML output:
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 overridinghtmlparser2
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 To remove whitespace, enable the However, intentional whitespace may be stripped out: domhandler has been upgraded to v5 so some parser
options like Since v2.0.0, Internet Explorer [IE] is no longer supported. TypeScript projects will need to update the types in v1.0.0. For the Since v1.1.1, Internet Explorer 9 [IE9] is no longer supported. No, this library is not XSS [cross-site scripting] safe. See #94. No, this library does not sanitize HTML. See #124, #125, and #141. Although The reason why your HTML attributes aren't
getting called is because inline event handlers [e.g., If the parser throws an erorr, check if your arguments are valid. See "Does invalid HTML get sanitized?". Yes, server-side rendering on Node.js is supported by this library. See demo. 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 [ See #158. Tags are lowercased by default. To prevent that from happening, pass the htmlparser2 option: Warning: By preserving case-sensitivity of the tags, you
may get rendering warnings like: See #62 and example. The TypeScript error occurs because Yes, you can enable or disable If you see the Webpack build warning: Then update your Webpack config to: See #238 and #213. Run benchmark: Output of benchmark run on MacBook Pro 2017: Run Size Limit: This project exists thanks to all the people who
contribute. [Contribute]. Become a financial contributor and help us sustain our community. [Contribute] Support this project with your organization. Your logo will show up here with a link to your website. [Contribute] 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. MIT will strip out invalid whitespace:
parse['
\n
']; // React.createElement['table']trim
option:parse['
\n', { trim: true }]; // React.createElement['br']parse['
Migration
v3.0.0
normalizeWhitespace
have been removed.v2.0.0
v1.0.0
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 ;
}
}
}];FAQ
Is this XSS safe?
Does invalid HTML get sanitized?
Are tags parsed?
tags and their contents are rendered on the server-side, they're not evaluated on the client-side. See #98.
Attributes aren't getting called
title
] are parsed as a string rather than a function. See #73.Parser throws an error
Is SSR supported?
Elements aren't nested
correctly
/>
] on non-void elements:parse['
Don't change case of tags
const options = {
htmlparser2: {
lowerCaseTags: false
}
};
parse['', options]; // React.createElement['CustomElement']
Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
TS Error: Property 'attribs' does not exist on type 'DOMNode'
DOMNode
needs be an instance of domhandler's Element
. See migration or #199.Can I enable trim for certain elements?
trim
for certain elements using
the replace
option. See #205.Webpack build warnings
export 'default' [imported as 'parse'] was not found in 'html-react-parser'
// webpack.config.js
module.exports = {
// ...
resolve: {
mainFields: ['browser', 'main', 'module']
}
};
Performance
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]
Contributors
Code Contributors
Financial Contributors
Individuals
Organizations
Enterprise
Support
License
Chủ Đề