在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:remarkablemark/html-react-parser开源软件地址:https://github.com/remarkablemark/html-react-parser开源编程语言:JavaScript 92.1%开源软件介绍:html-react-parserHTML to React parser that works on both the server (Node.js) and the client (browser):
The parser converts an HTML string to one or more React elements. To replace an element with another element, check out the Exampleconst parse = require('html-react-parser');
parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!') Replit | JSFiddle | CodeSandbox | TypeScript | Examples Table of Contents
InstallNPM: npm install html-react-parser --save Yarn: yarn add html-react-parser CDN: <!-- HTMLReactParser depends on React -->
<script src="https://unpkg.com/react@17/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> UsageImport or require the module: // ES Modules
import parse from 'html-react-parser';
// CommonJS
const parse = require('html-react-parser'); Parse single element: parse('<h1>single</h1>'); Parse multiple elements: parse('<li>Item 1</li><li>Item 2</li>'); Make sure to render parsed adjacent elements under a parent element: <ul>
{parse(`
<li>Item 1</li>
<li>Item 2</li>
`)}
</ul> Parse nested elements: parse('<body><p>Lorem ipsum</p></body>'); Parse element with attributes: parse(
'<hr id="foo" class="bar" data-attr="baz" custom="qux" style="top:42px;">'
); replaceThe The parse('<br>', {
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('<p id="replace">text</p>', {
replace: domNode => {
if (domNode.attribs && domNode.attribs.id === 'replace') {
return <span>replaced</span>;
}
}
}); replace with TypeScriptFor TypeScript projects, you may need to check that 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 childrenReplace the element and its children (see demo): import parse, { domToReact } from 'html-react-parser';
const html = `
<p id="main">
<span class="prettify">
keep me and make me pretty!
</span>
</p>
`;
const options = {
replace: ({ attribs, children }) => {
if (!attribs) {
return;
}
if (attribs.id === 'main') {
return <h1 style={{ fontSize: 42 }}>{domToReact(children, options)}</h1>;
}
if (attribs.class === 'prettify') {
return (
<span style={{ color: 'hotpink' }}>
{domToReact(children, options)}
</span>
);
}
}
};
parse(html, options); HTML output: <h1 style="font-size:42px">
<span style="color:hotpink">
keep me and make me pretty!
</span>
</h1> replace element attributesConvert DOM attributes to React props with import parse, { attributesToProps } from 'html-react-parser';
const html = `
<main class="prettify" style="background: #fff; text-align: center;" />
`;
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 elementExclude an element from rendering by replacing it with parse('<p><br id="remove"></p>', {
replace: ({ attribs }) => attribs && attribs.id === 'remove' && <></>
}); HTML output: <p></p> libraryThe To use Preact: parse('<br>', {
library: require('preact')
}); Or a custom library: parse('<br>', {
library: {
cloneElement: () => {
/* ... */
},
createElement: () => {
/* ... */
},
isValidElement: () => {
/* ... */
}
}
}); htmlparser2
Default htmlparser2 options can be overridden in >=0.12.0. To enable parse('<p /><p />', {
htmlparser2: {
xmlMode: true
}
}); trimBy default, whitespace is preserved: parse('<br>\n'); // [React.createElement('br'), '\n'] But certain elements like parse('<table>\n</table>'); // React.createElement('table') To remove whitespace, enable the parse('<br>\n', { trim: true }); // React.createElement('br') However, intentional whitespace may be stripped out: parse('<p> </p>', { trim: true }); // React.createElement('p') Migrationv1.0.0TypeScript projects will need to update the types in v1.0.0. For the import { Element } from 'domhandler/lib/node';
parse('<br class="remove">', {
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 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论