I'm trying to parse some basic HTML - for example:
It works fine, but the problem is that when I run it, it returns me an object like this:
{…} "$$typeof": Symbol(react.element) _owner: null _self: null _source: null _store: Object { … } key: null props: Object { style: {…}, children: "Hi Guys!" } ref: null type: "p" : Object { … }
And I'm not really sure what to do with this. All I really need is a simple string. Any help would be greatly appreciated. Thanks in advance.
html-react-parser
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.
replace
const parse = require('html-react-parser'); parse('Hello, World!'); // React.createElement('p', {}, 'Hello, World!')
Hello, World!
Replit | JSFiddle | CodeSandbox | TypeScript | Examples
trim
NPM:
npm install html-react-parser --save
Yarn:
yarn add html-react-parser
CDN:
<script src="https://unpkg.com/react@18/umd/react.production.min.js">script> <script src="https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js">script> <script> window.HTMLReactParser(/* string */); script>
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 1Item 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');
Lorem ipsum
Parse element with attributes:
parse( '' );
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>; } } });
text
For TypeScript projects, you may need to check that domNode is an instance of domhandler's Element:
domNode
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 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>
Convert DOM attributes to React props with attributesToProps:
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);
<div class="prettify" style="background:#fff;text-align:center">div>
Exclude an element from rendering by replacing it with :
parse('', { replace: ({ attribs }) => attribs && attribs.id === 'remove' && <></> });
The library option specifies the UI library. The default library is React.
library
To use Preact:
parse('', { library: require('preact') });
Or a custom library:
parse('', { library: { cloneElement: () => { /* ... */ }, createElement: () => { /* ... */ }, isValidElement: () => { /* ... */ } } });
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.
htmlparser2
Default htmlparser2 options can be overridden in >=0.12.0.
To enable xmlMode:
xmlMode
parse('', { htmlparser2: { xmlMode: true } });
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')Migrationv3.0.0domhandler has been upgraded to v5 so some parser options like normalizeWhitespace have been removed.v2.0.0Since v2.0.0, Internet Explorer (IE) is no longer supported.v1.0.0TypeScript 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.FAQIs 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 Parser throws an errorIf 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 correctlyIf 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 elementsSee #158.Don't change case of tagsTags 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 warningsIf 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.PerformanceRun 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:ContributorsCode ContributorsThis project exists thanks to all the people who contribute. [Contribute].Financial ContributorsBecome a financial contributor and help us sustain our community. [Contribute]IndividualsOrganizations Support this project with your organization. Your logo will show up here with a link to your website. [Contribute] EnterpriseAvailable 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.SupportGitHub SponsorsOpen CollectiveTideliftPatreonKo-fiLiberapayTeepsringLicense MIT Đọc tiếp programming html html-react-parser yarn React parse text Nextjs parse html React-dom-parser React-html-parser example Reply 9 0 Chia sẻ
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')Migrationv3.0.0domhandler has been upgraded to v5 so some parser options like normalizeWhitespace have been removed.v2.0.0Since v2.0.0, Internet Explorer (IE) is no longer supported.v1.0.0TypeScript 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.FAQIs 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 Parser throws an errorIf 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 correctlyIf 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 elementsSee #158.Don't change case of tagsTags 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 warningsIf 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.PerformanceRun 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:ContributorsCode ContributorsThis project exists thanks to all the people who contribute. [Contribute].Financial ContributorsBecome a financial contributor and help us sustain our community. [Contribute]IndividualsOrganizations Support this project with your organization. Your logo will show up here with a link to your website. [Contribute] EnterpriseAvailable 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.SupportGitHub SponsorsOpen CollectiveTideliftPatreonKo-fiLiberapayTeepsringLicense MIT Đọc tiếp programming html html-react-parser yarn React parse text Nextjs parse html React-dom-parser React-html-parser example Reply 9 0 Chia sẻ
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')
domhandler has been upgraded to v5 so some parser options like normalizeWhitespace have been removed.
normalizeWhitespace
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 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.
No, this library is not XSS (cross-site scripting) safe. See #94.
No, this library does not sanitize HTML. See #124, #125, and #141.
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 (/>) on non-void elements:
/>
parse(''); // returns single element instead of array of elements
See #158.
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.
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.
The TypeScript error occurs because DOMNode needs be an instance of domhandler's Element. See migration or #199.
DOMNode
Yes, you can enable or disable trim for certain elements using the replace option. See #205.
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.
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:
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