Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

choru-k/react-native-html-parser

Open more actions menu

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

Contributors 8

Morty Proxy This is a proxified and sanitized view of the page, visit original site.