Skip to content

g6ling/react-native-html-parser

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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