Git Product home page Git Product logo

dom-parser's Introduction

dom-parser

dom parser using javascript regex.

No Need node environment or special Browser!!!

Support react, react-native, vue etc...

Install

npm install --save react-native-dom-parser

Usage

import DomSelector from 'react-native-dom-parser';

const rootNode = DomSelector(rowHtmlData);

rootNode.getElementById('myCarousel');
rootNode.getElementsByClassName('item');
rootNode.getElementsByTagName('div');

rootNode.children
rootNode.children[0].getElementsByName('name')

rootNode.style
rootNode.classList

Support

Html tag

Base on https://www.w3.org/TR/html5/syntax.html#void-elements

  • Void elements:
area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr
  • escapable raw text elements
textarea, title
  • Normal elements
All other allowed HTML elements are normal elements.

Node Type

have ElementNode and TextNode

Node Structure

ElementNode:

  this.text;         // raw html text
  this.tagName;      // html tag name
  this.attributes;   // html tag arrtibute
  this.style;        // html style [object]
  this.classList;    // html class list [array]
  this.children;     // child node
  this.parent;       // parent node or null

TextNode:

  this.text;         // html raw text
  this.parent;       // parent node

Query Method

  ElementNode.getElementById(id)
  ElementNode.getElementsByClassName(className)
  ElementNode.getElementsByTagName(tagName)
  ElementNode.getElementsByName(name)

TODO

  • Set up auto-test
  • querySelector
  • querySelectorAll

dom-parser's People

Contributors

youhan26 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

dom-parser's Issues

convert attribute error

sample data:

<img data-src="/Images/Bangumi/201804/7c8a5a5b.jpg?w=400&h=400&mode=crop&scale=both" alt="Butlers~千年百年物语~" class="b-lazy">

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.