Introducing Markup-tools, a small powerful utility for manipulating markup and HTML

in #utopian-io6 years ago (edited)

image
https://github.com/peerquery/markup-tools

Tired of writing helper functions to manipulate markup? Markup tools is a library that provides some pretty useful transformations for you while being highly configurable.
The idea for a separate module can about after need to write the same helper functions for use on multiple projects, Peer Query, Adom, and Curator, with potentially, even more, coming in the near future.

Utilities

There are three core utilities of this library.
1. Builders
Builders can be used for markup building including:

  • templates using mustache styled placeholders
  • hyperlinked hashtags from plain text
  • hyperlinked mentions from plain text
  • image tags from raw image links
  • link tags from raw urls

Example:

const mtools = require('markup-tools');

const text = 'hello there @mic, did you join the #omg topic';

const res = mtools.build.hashtags(text, '/hot');
console.log(res);
//'hello there @mic, did you join the <a target="_blank" href="/hot/omg "> #omg </a> topic';

2. Parsers
Parsers can be used on text to:

  • extract image src and image url from text
  • extract raw links and ahref sources from text

Example:

const mtools = require('markup-tools');

//Call on even slightly healthy text
const text = ' mycomputer.home/kofi.png Kofi is going to school. This is a picture of his school: &lt; img alt ' + 
'="kofi\'s school" src = "[www.ko.fi/sch/img\](http://www.ko.fi/sch/img\)'&gt;. His favorite teacher is called Ama.' ;

const school_thumbnail = mtools.parse.images(text, null, null, 'src');
//'www.ko.fi/sch/img'

3. Formatters
Formatters can format:

  1. raw links out of text

  2. raw image links out of text

  3. HTML attributes of out text

Example

const mtools = require('markup-tools');
const text = '<b>bold</b> face';

const text = mtools.format.text(text);
//'bold face'

Installation

Markup tools can be used in both Node.js and web browser.
Node.js
Install via NPM:

npm install markup-tools --save

Browser
To use in the browser, get the dist:

https://unpkg.com/markup-tools/dist/markup-tools.min.js

const text = '<b>hello</b>';
const res = mtools.format.text(text);
console.log(res);
//'hello'

Development

Code is linted with ESLint to enforce a consistent style. We also use Husky to run pre-commit and pre-push tasks as well as build with Travis CI.
There are 10 test suites with a total of 23 Mocha and Chai based tests that cover the entire library's functionalities.
The browser build is built with webpack 4. Contributions is always welcome if you can help improve our regexes, helpers and anything else.

Limitations

REGEX based
Markup JS is a small library with no dependencies, yet designed to work in both Node.js and the web browser. The entire library is based on REGEX and used it to parse everything, including HTML.

NOT a sanitizer
Another thing worth noting is that markup-tools does NOT sanitize input.

Resources

Github repo: https://github.com/peerquery/markup-tools
NPM: https://www.npmjs.com/package/markup-tools


Published on Peer Query - Blockchain-powered p2p collaboration.

Sort:  

Markup-tools seems like an interesting utility that could be relevant to many here on Steem.

I would have loved to see much more detail about it in your post, however. This feels like the outline of a post. It also makes the post inaccessible to a larger audience of readers. You don't explain any of the terms you use, opting for code samples instead.

The writing of the post could have also used some more editing for clarity and grammar. There are parts that are difficult to read, not for reasons of being technical, but because of proofreading issues. I would be happy to give examples of those in a follow-up comment, if you wish.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Thank you for your review, @didic!

So far this week you've reviewed 13 contributions. Keep up the good work!

Hi, have you tried https://nearley.js.org ?

Just want to have second opinion since you use regex a lot in this project 😊

wow, great project you got there. not sure i will have enough time to review your library but will let you know if i do. thanks for noticing!

Umm...Actually, that's not my project 😅. Just want someone to know about it since I use it for similar use cases.

Hi @dzivenu!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @dzivenu!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Coin Marketplace

STEEM 0.20
TRX 0.25
JST 0.038
BTC 96483.87
ETH 3356.14
USDT 1.00
SBD 3.20