React-native-html-parser NPM

react-native-html-parser

can use html parser in react-native, titanium, and anywhere. This is based on xmldom.

Install:

npm install react-native-html-parser

Example:

import React, {
    Component,
    View,
    Text,
    StyleSheet,
    TextInput,
    WebView,
} from 'react-native'


var DomParser = require('react-native-html-parser').DOMParser
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>`
        let doc = new DomParser().parseFromString(html,'text/html')
        
        console.log(doc.querySelect('#b .inA'))
        console.log(doc.getElementsByTagName('a'))
				console.log(doc.querySelect('#b a[href="example.org"]'))
				console.log(doc.getElementsByClassName('a', false))
    }
    
}

var DOMParser = require('react-native-html-parser').DOMParser;
var doc = new DOMParser().parseFromString(
    '<html><body>'+
    '<div id="a" class="a">'+
        '<a class="b">abcd</a>'+
    '</div>'+
    '<div class="b">'+
        '<a href="aa" id="b">'+
    '</div>'+
    '</body></html>'
    ,'text/html');

console.log(doc.getElementsByAttribute('class', 'b'));
console.log(querySelecotr('.div.aa       class#a a'))
console.log(getElementsBySelector('div.aa#in[ii="a"]'))
console.log(doc.querySelect('div.a a.b'))
console.log('end')

import DOMParser from 'react-native-html-parser';

const html = `<p>Hello world <b>world</b> <i>foo</i> abc</p>`;    
const parser = new DOMParser.DOMParser();
const parsed = parser.parseFromString(html, 'text/html');

...

error solution

xmldom error entity not found: ~

Check this issue

API Reference

DOMParser:

	```javascript
	parseFromString(xmlsource,mimeType)
	```
	* **options extension** _by xmldom_(not BOM standard!!)

	```javascript
	//added the options argument
	new DOMParser(options)

	//errorHandler is supported
	new DOMParser({
		/**
		 * locator is always need for error position info
		 */
		locator:{},
		/**
		 * you can override the errorHandler for xml parser
		 * @link http://www.saxproject.org/apidoc/org/xml/sax/ErrorHandler.html
		 */
		errorHandler:{warning:function(w){console.warn(w)},error:callback,fatalError:callback}
		//only callback model
		//errorHandler:function(level,msg){console.log(level,msg)}
	})
	
	```

XMLSerializer
```
```javascript
serializeToString(node)
```
```
DOM level2 method and attribute:

Node

		attribute:
			nodeValue|prefix
		readonly attribute:
			nodeName|nodeType|parentNode|childNodes|firstChild|lastChild|previousSibling|nextSibling|attributes|ownerDocument|namespaceURI|localName
		method:	
			insertBefore(newChild, refChild)
			replaceChild(newChild, oldChild)
			removeChild(oldChild)
			appendChild(newChild)
			hasChildNodes()
			cloneNode(deep)
			normalize()
			isSupported(feature, version)
			hasAttributes()

DOMImplementation

		method:
			hasFeature(feature, version)
			createDocumentType(qualifiedName, publicId, systemId)
			createDocument(namespaceURI, qualifiedName, doctype)

Document : Node

		readonly attribute:
			doctype|implementation|documentElement
		method:
			createElement(tagName)
			createDocumentFragment()
			createTextNode(data)
			createComment(data)
			createCDATASection(data)
			createProcessingInstruction(target, data)
			createAttribute(name)
			createEntityReference(name)
			getElementsByTagName(tagname)
			importNode(importedNode, deep)
			createElementNS(namespaceURI, qualifiedName)
			createAttributeNS(namespaceURI, qualifiedName)
			getElementsByTagNameNS(namespaceURI, localName)
			getElementById(elementId)
     getElementByClassName(classname)
     querySelect(query) // querySelect only support tagName,className,Attribute,id, parent descendant

DocumentFragment : Node

Element : Node

		readonly attribute:
			tagName
		method:
			getAttribute(name)
			setAttribute(name, value)
			removeAttribute(name)
			getAttributeNode(name)
			setAttributeNode(newAttr)
			removeAttributeNode(oldAttr)
			getElementsByTagName(name)
			getAttributeNS(namespaceURI, localName)
			setAttributeNS(namespaceURI, qualifiedName, value)
			removeAttributeNS(namespaceURI, localName)
			getAttributeNodeNS(namespaceURI, localName)
			setAttributeNodeNS(newAttr)
			getElementsByTagNameNS(namespaceURI, localName)
			hasAttribute(name)
			hasAttributeNS(namespaceURI, localName)
     getElementByClassName(classname)
     querySelect(query) // querySelect only support tagName,className,Attribute,id, parent descendant

Attr : Node

		attribute:
			value
		readonly attribute:
			name|specified|ownerElement

NodeList

		readonly attribute:
			length
		method:
			item(index)

NamedNodeMap

		readonly attribute:
			length
		method:
			getNamedItem(name)
			setNamedItem(arg)
			removeNamedItem(name)
			item(index)
			getNamedItemNS(namespaceURI, localName)
			setNamedItemNS(arg)
			removeNamedItemNS(namespaceURI, localName)

CharacterData : Node

		method:
			substringData(offset, count)
			appendData(arg)
			insertData(offset, arg)
			deleteData(offset, count)
			replaceData(offset, count, arg)

Text : CharacterData
```
		method:
			splitText(offset)
		
```
CDATASection
Comment : CharacterData

DocumentType

		readonly attribute:
			name|entities|notations|publicId|systemId|internalSubset

Notation : Node

		readonly attribute:
			publicId|systemId

Entity : Node

		readonly attribute:
			publicId|systemId|notationName

EntityReference : Node

ProcessingInstruction : Node

		attribute:
			data
		readonly attribute:
			target

DOM level 3 support:

Node

		attribute:
			textContent
		method:
			isDefaultNamespace(namespaceURI){
			lookupNamespaceURI(prefix)

DOM extension by xmldom

Node Source position extension;

		attribute:
			//Numbered starting from '1'
			lineNumber
			//Numbered starting from '1'
			columnNumber

dom xml html parser javascript DOMParser XMLSerializer ReactNative titanium

@infinitebrahmanuniverse/nolb-react-native-h @everything-registry/sub-chunk-2580 @fto-consult/expo-ui-client letovo-api @zalastax/nolb-react-native-h steam-market-item-image-fetcher @team-llambda/edupoint-pxpwebservices-synergy @reclaimprotocol/reclaim-node

4 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago