npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

html-scribe

v1.0.2

Published

Lightweight front-end HTML text parser

Downloads

1

Readme

Scribe — Client-side text parser.

Parse any page / DOM element's text content. Gets all unique strings used in the given element. Generate a dictionary based on parsing results. Exports results in JSON format.

Installation

Install the package with your package manager of choice.

yarn add html-scribe
# or
npm install --save html-scribe

Import the package.

import Scribe from 'html-scribe'

// or

const Scribe = require('html-scribe')

Getting Started

To use Scribe, you first need to create an instance. Optionnaly, pass it an options object a first argument.

const parser = new Scribe({
    // options table located below
})

Basic Usage

Scribe should work with all major front-end frameworks, since it exclusively uses the vanilla JS API.

Manually, using API

// Initialize Scribe instance, target element "main"
const parser = new Scribe()

// Target "main"
const element = document.querySelector('main')

// Parse Element
const strings = parser.parse(element)

// Generate 
const dictionary = parser.generateDictionary()

// export results and dictionnary to JSON
// with title "myExport"
parser.exportStringsAndDictionnary('myExport')

Scribe can easily automate this same process.

Automatically, using options

new Scribe({
  el: document.querySelector('main'),
  config: {
    strings: {
      autoStart: true,
      exportOnFinish: true,
    },
    dictionary: {
      autoStart: true,
      exportOnFinish: true,
    }
  }
})

Instance Options

Options are declared through nested object properties, formatted as such:

Default options

const defaultOptions = {
  el: null,
  source: [],
  config: {
    strings: {
      autoStart: false,
      exportOnFinish: false,
      sort: false,
    },
    dictionary: {
      autoStart: false,
      exportOnFinish: false,
      sort: true,
    }
  }
}

Strings- and dictionnary-related options are to be declared separately.

Options

| Option | Type | Default | Description | | -------- | ------------ | ------- | -------------------------------- | | el | DOMElement | null | Element to parse for strings. | | source | Array[String]| [] | Strings array to use as initial source when parsing element.| |autoStart| Boolean | false | Parsing starts as soon as instance is created. | |exportOnFinish|Boolean | false | Start download dialog as soon as parsing is finished. | | sort | Boolean | false | Sort results alphabetically. |

Instance Methods

| Method | Description | Arguments | Returns | | -------- | -------- | ------- | ------ | |parse(el)|Parse element for strings|el: Element to parse. Uses options.el if left empty.| Parsing results Array[String]| |generateDictionary(list)|Extract unique words from supplied list|list: Strings to convert into dictionary. Uses parsing results (instance.strings) if left empty.|Dictionnary Array[String]| |exportStrings(title)|Convert parsing results to JSON and trigger download dialog|title: title of generated file.|JSON File| |exportDictionary(title)|Convert dictionary to JSON and trigger download dialog|title: title of generated file.|JSON File| |exportStringAndDictionary(title)|Export parsing results and dictionary to JSON and trigger download dialog|title: title of generated file.|JSON File|

Contributing

Scribe still is a young package. Issues, pull requests and forks are welcome!