react-native-html-parser

v0.1.0

Published

2 years ago

can use html/xml parser in react-native/titanium/browser anywhere

Downloads

18,135

0High
0Medium
0Low

g6lingp

dom xml html parser javascript DOMParser XMLSerializer ReactNative titanium

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:

parseFromString(xmlsource,mimeType)

options extension by xmldom(not BOM standard!!)

//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
```
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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

react-native-html-parser

Install:

Example:

error solution

[xmldom error] entity not found: ~~~~~

API Reference

DOM level2 method and attribute:

DOM level 3 support:

DOM extension by xmldom