Registry / serialization / react-native-dom-parser

react-native-dom-parser

library1.5.3jsnpmunverified

react-native-dom-parser is a JavaScript DOM parser specifically designed for environments where standard browser DOM APIs or Node.js DOM implementations are not available, such as within React Native applications. It operates by parsing HTML strings using JavaScript regular expressions, making it lightweight and highly portable across various JavaScript ecosystems including React, React Native, and Vue. The current stable version is 1.5.3. Its primary differentiator is its complete independence from specific host environments, relying solely on regex for parsing. While this offers broad compatibility, it can introduce limitations compared to robust, spec-compliant parsers, particularly concerning edge cases in malformed HTML. The library provides a subset of standard DOM-like query methods including `getElementById`, `getElementsByClassName`, `getElementsByTagName`, and `getElementsByName`, returning a custom node structure (`ElementNode` and `TextNode`). Planned future enhancements include the addition of `querySelector` and `querySelectorAll` capabilities.

serialization web-framework

npm install react-native-dom-parser

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-DOM-P

react-native-dom-parser

serializationjavascriptv1.5.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

DomSelector

✓ import DomSelector from 'react-native-dom-parser';

✗ import { DomSelector } from 'react-native-dom-parser';

The library uses a default export for its primary function. Importing with curly braces `{}` will result in `undefined`.

DomSelector (CommonJS)

✓ const DomSelector = require('react-native-dom-parser');

✗ const { DomSelector } = require('react-native-dom-parser');

For CommonJS environments, `require()` should directly assign the default export. Destructuring will not work as expected.

ElementNode/TextNode Structure

✓ const rootNode = DomSelector(htmlString); console.log(rootNode.children[0].tagName);

✗ import { ElementNode, TextNode } from 'react-native-dom-parser';

The internal `ElementNode` and `TextNode` classes are not directly exported for public consumption. You interact with them via the parsed `rootNode` and its children.

Demonstrates parsing an HTML string, accessing elements using ID, class, tag name, and name, and traversing the resulting node structure.

import DomSelector from 'react-native-dom-parser'; const rowHtmlData = ` <div id="myCarousel" class="carousel slide" data-interval="false"> <h1 style="color: blue;">Welcome to My Page</h1> <div class="item active"> <p>This is item 1.</p> <input type="text" name="dataItem1" value="hello" /> </div> <div class="item"> <p>This is item 2.</p> <input type="text" name="dataItem2" value="world" /> </div> <span class="footer">A simple footer.</span> </div> `; // Parse the HTML string into a DOM-like structure const rootNode = DomSelector(rowHtmlData); // Query methods console.log('Root Node Tag:', rootNode.tagName); // Should be 'div' const carouselElement = rootNode.getElementById('myCarousel'); console.log('Carousel ID:', carouselElement?.attributes.id); const items = rootNode.getElementsByClassName('item'); console.log('Number of items:', items.length); if (items.length > 0) { console.log('First item classList:', items[0].classList); const inputByName = items[0].getElementsByName('dataItem1'); console.log('Input value by name:', inputByName[0]?.attributes.value); } const divs = rootNode.getElementsByTagName('div'); console.log('Number of div elements:', divs.length); // Accessing children and properties console.log('Children of rootNode:', rootNode.children.map(c => c.tagName || 'text')); if (rootNode.children.length > 0 && rootNode.children[1].tagName === 'h1') { const h1Node = rootNode.children[1]; console.log('H1 style:', h1Node.style); console.log('H1 text:', h1Node.children[0]?.text); // Accessing text node directly }

Debug

Known issues

gotchaThis library uses regular expressions for HTML parsing, which can be inherently fragile and may not perfectly adhere to the W3C HTML5 specification for all valid or malformed HTML structures. Complex or non-standard HTML might be parsed incorrectly.

fix

Always test parsing results thoroughly, especially with diverse and complex HTML inputs. Consider pre-processing HTML if specific patterns cause issues.

affects: >=1.0.0

gotchaThe parser currently lacks support for `querySelector` and `querySelectorAll`, limiting element selection to `getElementById`, `getElementsByClassName`, `getElementsByTagName`, and `getElementsByName`. Complex CSS selector queries are not possible.

fix

Design your HTML with simple IDs, class names, or tag names that can be targeted by the available query methods. For more complex selection, manual tree traversal may be required.

affects: >=1.0.0

gotchaPerformance for parsing very large or deeply nested HTML documents can be a concern. Regex-based parsing might be less efficient than optimized native DOM parsers or C++ backed alternatives for significant workloads.

fix

For performance-critical applications, consider parsing smaller chunks of HTML or exploring alternative solutions if the target environment supports more robust DOM parsing.

affects: >=1.0.0

gotchaThe `style` attribute parsing results in an object, but it's a simple key-value pair representation and might not fully replicate browser-level CSS cascading or computed styles. It reflects inline styles directly.

fix

Do not rely on the `style` property for complex CSS logic or computed styles. It's best used for accessing directly declared inline styles.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: DomSelector is not a function

Attempting to import `DomSelector` as a named export when it is a default export, or incorrect CommonJS require.

fix

Use `import DomSelector from 'react-native-dom-parser';` for ESM or `const DomSelector = require('react-native-dom-parser');` for CommonJS.

Cannot read properties of undefined (reading 'tagName')

Attempting to access properties on a node that was not found, resulting in `undefined` (e.g., `getElementById` returned `null` or a query array was empty).

fix

Always check if the result of a query method is not null or undefined, and if arrays are not empty, before attempting to access properties on the returned nodes (e.g., `element?.tagName`).

Unexpected token < in JSON at position X

Trying to parse an HTML string as JSON. This is not a direct error from `react-native-dom-parser` but a common mistake when dealing with network responses.

fix

Ensure that the content type of the received data is correctly handled. If receiving HTML, pass it directly to `DomSelector`. If expecting JSON, verify the server response.

Upgrade

Version history

1.5.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

Resources

githubhttps://github.com/YouHan26/dom-parser ↗

packagehttps://www.npmjs.com/package/react-native-dom-parser ↗