Skip to content

choru-k/react-native-html-parser

Repository files navigation

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))
    }
    
}

or

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')

or

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
    

About

can use html parser in react-native/titanium and anywhere

Resources

License

Stars

Watchers

Forks

Packages

No packages published