React Native HTML Parser

0.1.0 · abandoned · verified Sun Apr 19

This package provides a DOM/XML parser for React Native, Titanium, and browser environments, based on the `xmldom` library. The current and only stable version is 0.1.0, which was last published over 6 years ago. It aims to offer a W3C DOM Level 2 Core-compatible API, including `DOMParser` and `XMLSerializer`, along with `xmldom`-specific extensions for error handling. Due to its age and lack of maintenance, it is unlikely to be compatible with modern JavaScript, Node.js, or React Native environments and may contain unpatched security vulnerabilities inherited from its `xmldom` dependency. Developers should consider more actively maintained alternatives for parsing HTML in React Native.

Common errors

```
[xmldom error] entity not found: ~~~~~
```
cause This error occurs when the parser encounters an XML or HTML entity (e.g., ` `, `—`) that it does not recognize or that is malformed.

fix Check the HTML/XML source for invalid or unsupported entities. Ensure character encoding is correctly specified if external sources are being parsed. Refer to the linked GitHub issue for potential workarounds or to preprocess HTML.

Warnings

breaking This package has been abandoned for over 6 years (last published v0.1.0). It is highly unlikely to be compatible with modern React Native, Node.js, or browser environments due to significant changes in these platforms.
Fix: Migrate to a currently maintained HTML parsing library designed for React Native, such as `html-react-parser` or `@react-native-html/parser`.
breaking The underlying `xmldom` library, upon which this package is based, has multiple known security vulnerabilities, including XML injection, prototype pollution, and improper input validation. The `xmldom` maintainers advise migrating to `@xmldom/xmldom` for security fixes.
Fix: Due to the abandoned status of `react-native-html-parser`, there are no direct fixes. Users must migrate to an alternative library that is actively maintained and addresses `xmldom`'s security issues or uses a different parsing engine.
gotcha Examples in the README use deprecated React Native imports (e.g., `import { View, Text } from 'react-native'`). Modern React Native requires specific imports for components or hooks.
Fix: If attempting to use this package in an old React Native project, ensure React Native imports are compatible with the specific version of React Native in use. For new projects, avoid this package entirely.
gotcha The `xmldom` library, and thus `react-native-html-parser`, might not be fully spec-compliant with the latest HTML5 parsing rules, potentially leading to unexpected parsing behavior compared to browser-native `DOMParser` implementations.
Fix: Thoroughly test parsing results for critical use cases. Consider alternatives based on more robust parsers like `parse5` (e.g., `react-native-parse-html`).

Install

npm install react-native-html-parser npm
yarn add react-native-html-parser yarn
pnpm add react-native-html-parser pnpm

Imports

DOMParser
wrong:
```
const DOMParser = require('react-native-html-parser').DOMParser;
```
correct:
```
import { DOMParser } from 'react-native-html-parser';
```
ESM import is shown, but the package primarily used CommonJS `require` given its age. The default `require` exports an object with `DOMParser` as a property.
DOMParser
wrong:
```
import DomParser from 'react-native-html-parser';
```
correct:
```
const DomParser = require('react-native-html-parser').DOMParser;
```
This is the most common CommonJS `require` pattern seen in examples. Note the casing variation for the imported variable (`DomParser` vs `DOMParser`).
XMLSerializer
wrong:
```
import { XMLSerializer } from 'react-native-html-parser';
```
correct:
```
const { XMLSerializer } = require('react-native-html-parser');
```
While an ESM import might appear to work in some bundlers, the package was designed for CommonJS. The `XMLSerializer` is another export from the main module.

Quickstart

Demonstrates parsing an HTML string, querying elements using various methods like `querySelect` and `getElementsByTagName`, and briefly shows the document structure. Note that `XMLSerializer` import might need adjustment depending on the exact build environment.

import React, { Component } from 'react-native';
import { DOMParser } from 'react-native-html-parser';

class TestReactNativeHtmlParser extends Component {
    componentDidMount() {
        let html = `<html>
                        <body>
                            <div id="b a">
                                <a href="example.org">
                                <div class="inA">
                                    <br>bbbb</br>
                                </div>
                            </div>
                            <div class="bb a">
                                Test
                            </div>
                        </body>
                    </html>`;
        
        // Instantiate DOMParser and parse the HTML string
        let doc = new DOMParser().parseFromString(html, 'text/html');
        
        // Example usage of parsed document methods
        console.log('QuerySelect #b .inA:', doc.querySelect('#b .inA'));
        console.log('getElementsByTagName a:', doc.getElementsByTagName('a'));
        console.log('QuerySelect #b a[href="example.org"]:', doc.querySelect('#b a[href="example.org"]'));
        console.log('getElementsByClassName a (non-strict):', doc.getElementsByClassName('a', false));

        // Serialize the document back to a string
        // const serializer = new XMLSerializer(); // Not directly exported from main module in all cases
        // console.log('Serialized HTML:', serializer.serializeToString(doc));
    }

    render() {
        return null; // For demonstration, no UI rendered
    }
}

export default TestReactNativeHtmlParser;

view raw JSON →