g6ling / react-native-html-parser Goto Github PK

View Code? Open in Web Editor NEW

84.0 4.0 25.0 66 KB

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

License: GNU Lesser General Public License v2.1

JavaScript 100.00%

react-native-html-parser's Introduction

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

react-native-html-parser's People

Contributors

Stargazers

Watchers

react-native-html-parser's Issues

To much that is missing

This library is really greet, specially when it could handle the missing html tags.

Now there is still to much work to be done.

1- Methods name is wrong eg querySelect.
2- This need to work with typescript, eg need to implement types.
3- querySelect dose not really work like it should be, take for example this selector ".test> p:first-child" this will not return the correct data at all.

I made this library work together with node-html-parser where is this library will parse the html and correct all missing html tags and then I use node-html-parser to reparse the html return from this library and work there after with the html.

I really want to skip this as it takes more time then it should take.

It would be great to have a look at node-html-parser and use their type/selector operation but use this library as html parser.

Is there is plan to do this ?

Class names that contain a dash char don't work

For example, I query elements with class .paddle-event, i get nothing because internally the lib only searches for elements with class .paddle.

Same for h3 (and the like) elements. Internally it only searches for 'h' tags which don't exist!

Typo in second example

console.log(querySelecotr('.div.aa class#a a'))

did you mean console.log(querySelector('.div.aa class#a a'))?

What is "findSelector"?

The readme shows:

console.log(findSelector('div.aa#in[ii="a"]'))

but I cannot find findSelector anywhere. I was unable to get querySelect to find based on any attribute, I resorted to getElementsByAttribute, but I would really prefer to use a css selector.

QuerySelector with Attribute values only works with a-z and A-Z

The QuerySelector on attributes works only with values that match a-z or A-Z.

The following attributes could not be used for querying:

var DOMParser = require('react-native-html-parser').DOMParser;
var doc = new DOMParser().parseFromString('<input name="test_token"><input name="test-token"><input name="test123">');
doc.querySelect('input[name="test_token"]'); // gets all input fields
doc.querySelect('input[name="test-token"]'); // gets all input fields
doc.querySelect('input[name="test123"]'); // gets all input fields

Problems parsing HTML String with named html entities

As the title says, I am having problems with named HTML entities.

Steps to reproduce:

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

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

Expected behaviour:
HTML string gets parsed

Actual behaviour:

querying for `link[rel=icon]` returns way too many nodes

As the title states when trying to get a documents favicon instead of getting a few items I get a lot of unrelated things, would you mind checking it?

// get the string html from https://www.youtube.com/watch?v=wuClZjOdT30
// expect to retrieve img/favicon_32-vflOogEID.png
doc.querySelect('link[rel=icon]') // returns like a 100 items

QuerySelect is named as QuerySelector in the official documentation

I'm using Type Script, and there's already the types for the official DOMParser types.
Here are the types for QuerySelector function:

And this is the official documentation https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

The problem is that for some reason in this package we have querySelect instead of querySelector, and this fact breaks type checking:

Any reason for having a different name? Can this be fixed?

[xmldom error] element parse error

.then((res) => { const parser = new DOMParser.DOMParser(); const parsed = parser.parseFromString(res, 'text/html'); alert(parsed);

the error pops up and then the alert with the right parsed html code comes. but I cant work with it because of this error, please help me.

"dependencies": { "@react-native-community/async-storage": "^1.6.2", "lodash": "^4.17.11", "react": "16.8.3", "react-native": "0.59.5", "react-native-elements": "^1.1.0", "react-native-gesture-handler": "^1.4.1", "react-native-html-parser": "^0.0.5", "react-native-i18n": "^2.0.15", "react-native-linear-gradient": "^2.5.4", "react-native-material-dropdown": "^0.11.1", "react-native-modal": "^10.0.0", "react-native-progress": "^3.6.0", "react-native-restart": "^0.0.10", "react-native-swipe-gestures": "^1.0.3", "react-native-vector-icons": "^6.4.2", "react-native-webview": "^7.4.2", "react-navigation": "^3.9.1" }, "devDependencies": { "@babel/core": "^7.4.4", "@babel/runtime": "^7.4.4", "babel-jest": "^24.7.1", "jest": "^24.7.1", "metro-react-native-babel-preset": "^0.53.1", "react-test-renderer": "16.8.3" }

How to catch a parse exception

The React Native ExceptionsManager is showing the following exception when trying to parse an invalid HTML document which contains not properly closed tags.

[xmldom fatalError]	end tag name: tr is not match the current start tagName:table 
@#[line:370,col:76]

How can I capture the exception to prevent the application from crashing?

XML DOM error while parsing HTML string

I'm getting the error "[xmldom fatalError] end tag name: p is not match the current start tagName:undefined" while trying to parse an html string

import DOMParser from 'react-native-html-parser';
const parser = new DOMParser.DOMParser();

render(){
const parsed = parser.parseFromString(item.excerpt, 'text/html');
return <Text style={styles.ListItem_brief}>{parsed}...</Text>
}

the string being parsed is:

Disney Theatrical Productions and Frozen have partnered with The Actors Fund to celebrate International Women’s Day with two special events: “Women’s Day on Broadway: …
<a href="https://thewaltdisneycompany.com/disneys-frozen-partners-actors-fund-celebrate-international-womens-day/\" class="button button-more">Read More</p>\n"

I apologise for the bad pic, the phone doesn't allow screenshots

Thanks,