html-select

match and splice a tokenized html stream with css selectors


example

readable stream

Given a tokenized stream from
html-tokenize, this program will
print the dt tags matching the selector 'ul > li dt':

`` js
var select = require('html-select');
var tokenize = require('html-tokenize');
var fs = require('fs');

var s = select('ul > li dt', function (e) {
console.log(' MATCH ');
e.createReadStream().on('data', function (row) {
console.log([ row[0], row[1].toString() ]);
});
});
fs.createReadStream(__dirname + '/page.html').pipe(tokenize()).pipe(s);
s.resume();
`

The s.resume() is necesary to put the stream into flow mode since we aren't
doing anything with the output of s.

Now this html input:

` html







hello there!

This presentation contains these examples:

• 
  
  browserify
  
  
  node-style require() in the browser
  
  



• 
  
  streams
  
  
  shuffle data around with backpressure
  
  



• 
  
  ndarray
  
  
  n-dimensional matricies on top of typed arrays
  
  



• 
  
  music
  
  
  make music with code
  
  



• 
  
  voxeljs
  
  
  make minecraft-style games in webgl
  
  



• 
  
  trumpet
  
  
  transform html with css selectors and streams
  
  

`

gives this output:

`
MATCH
[ 'open', '

' ]
[ 'text', 'browserify' ]
[ 'close', '

' ]
MATCH
[ 'open', '

' ]
[ 'text', 'streams' ]
[ 'close', '

' ]
MATCH
[ 'open', '

' ]
[ 'text', 'ndarray' ]
[ 'close', '

' ]
MATCH
[ 'open', '

' ]
[ 'text', 'music' ]
[ 'close', '

' ]
MATCH
[ 'open', '

' ]
[ 'text', 'voxeljs' ]
[ 'close', '

' ]
MATCH
[ 'open', '

' ]
[ 'text', 'trumpet' ]
[ 'close', '

' ]
`

transform

Using the same html file from the previous example,
this script converts everything inside dt elements to uppercase:

` js
var select = require('html-select');
var tokenize = require('html-tokenize');
var through = require('through2');
var fs = require('fs');

var s = select('dt', function (e) {
var tr = through.obj(function (row, buf, next) {
this.push([ row[0], String(row[1]).toUpperCase() ]);
next();
});
tr.pipe(e.createStream()).pipe(tr);
});

fs.createReadStream(__dirname + '/page.html')
.pipe(tokenize())
.pipe(s)
.pipe(through.obj(function (row, buf, next) {
this.push(row[1]);
next();
}))
.pipe(process.stdout)
;
`

Running the transform program yields this html output:

` html







hello there!

This presentation contains these examples:

• 
  
  BROWSERIFY
  
  
  node-style require() in the browser
  
  



• 
  
  STREAMS
  
  
  shuffle data around with backpressure
  
  



• 
  
  NDARRAY
  
  
  n-dimensional matricies on top of typed arrays
  
  



• 
  
  MUSIC
  
  
  make music with code
  
  



• 
  
  VOXELJS
  
  
  make minecraft-style games in webgl
  
  



• 
  
  TRUMPET
  
  
  transform html with css selectors and streams
  
  

`

methods

` js
var select = require('html-select')
`

var sel = select(selector, cb)

Create a new html selector transform stream sel.

sel expects tokenized html objects
as input and writes tokenized html objects as output.

If selector and cb are given, sel.select(selector, cb) is called
automatically.

sel.select(selector, cb)

Register a callback cb(elem) to fire whenever the css selector string
matches.

elem.createReadStream(opts)

Create a readable object mode stream at the selector. The readable stream
contains all the matching tokenized html objects including the element that
matched and its closing tag.

If opts.inner is true, only read the inner content. Otherwrite read the outer
content.

elem.createWriteStream(opts)

Create a writable object mode stream at the selector. The writable stream writes
into the document stream at the selector, replacing the existing content.

If opts.inner is true, only write to the inner content. Otherwrite write to
the outer content.

elem.createStream(opts)

Create a duplex object mode stream at the selector. The writable side will write
into the document stream at the selector, replacing the existing content. The
readable side contains the existing content.

If opts.inner is true, only read and write to the inner content. Otherwrite
read and write to the outer content.

elem.setAttribute(key, value)

Set an attribute named by key to value.

If value is true, the attribute will appear without an equal sign in the
markup.

elem.removeAttribute(key)

Remove an attribute named by key.

elem.getAttribute(key)

Return an object with a single attribute value named by key.

elem.getAttributes()

Return an object with all attributes.

properties

elem.name

The string name of the tag.

events

elem.on('close', function () {})

When a matched element is closed for reading and writing, this event fires.

usage

`
usage: html-select SELECTOR OPTIONS

Given a newline-separated json stream of html tokenize output on stdin,
print content below matching html tokens as json on stdout.

OPTIONS are:

-r, --raw Instead of printing html token data as json, print the html
directly.

`

supported css selectors

Internally html-select uses cssauron.

install

With npm do:

`
npm install html-select
`

to get the library or

`
npm install -g html-select
``

to get the command-line program.

license

MIT