markup-tools
v2.10.0
Published
Utility to format markup
Downloads
4
Readme
Markup tools
Markdown and text manipulation tools. Casts all inputs types to String.
If you are looking for the earliest versions please see: Markup Builder.
Installation
Node.js
npm install markup-tools --save
Use as:
const mtools = require('markup-tools');
Browser
<script src="https://unpkg.com/markup-tools/dist/markup-tools.min.js"></script>
Exposed to the global browser window as mtool
. Call directly in the browser code as mtools
const text = '<b>hello</b>';
const res = mtools.format.text(text);
console.log(res);
//'hello'
Important!?
REGEX based
This is a small purely Javascript-based library designed to work in both the browser and in Node.js. With no dependencies, it uses REGEX
and helper functions to attempt to parse everything, including html string.
NOT a sanitizer
Please note that none of the functions in this library does sanitizing of HTML string. If you want to sanitize HTML please use the known HTML sanitizers such as DOM Purify, sanitize-html and XSS.
Parsers mtools.parse
Parsing images
Extract image srcs from text;
//API
mtools.parse.image(
input_string,
number_of_the_image_link_to_be_returned,
type_as_png_jpg_bpm_tif_gif,
source_of_image_link_raw_or_src
);
//Examples
//Call on even slightly healthy text
const text = ' mycomputer.home/kofi.png Kofi is going to school. This is a picture of his school: < img alt ' +
'="kofi\'s school" src = "www.ko.fi/sch/img\'>. His favorite teacher is called Ama.' ;
const school_thumbnail = mtools.parse.images(text, null, null, 'src');
//'www.ko.fi/sch/img'
const kofi_thumbnail = mtools.parse.images(text);
//'mycomputer.home/kofi.png'
//with no specified source, defaults to 'raw'
Advanced use
const text = ' www.image1.png http://www.image2.jpg www.image3.svg www.image4.png http://www.image5.jpg www.image6.svg < img alt="sample img1\' src="/sample-img1" > < img alt="sample img2\' src="/sample-img2.jpg" / > < img alt = "sample img3\' src="/sample-img3" > < img alt = "sample img4\' src="/sample-img4.jpg" >';
//Image type supports a trailing '.' to the extension
mtools.img.get(text, 2, '.png', 'raw');
//is the same as
mtools.img.get(text, 2, 'png', 'raw');
//Examples
console.log(mtools.parse.images(text, null, 'jpg', 'raw'));
//'http://www.image2.jpg'
console.log(mtools.parse.images(text, 1, '.png'));
//'www.image4.png'
//defaults to 'raw' mode when no mode is set
console.log(mtools.parse.images(text, 0, 'svg'));
//'www.image3.svg'
console.log(mtools.parse.images(text, 1, '.svg'));
//'www.image6.svg'
console.log(mtools.parse.images(text, null, 'jpg', 'src'));
//'/sample-img2.jpg'
console.log(mtools.parse.images(text, 1, '.jpg', 'src'));
//'/sample-img4.jpg'
console.log(mtools.parse.images(text, 2, null, 'src'));
//'/sample-img1'
Parsing links
Extract urls from text.
//API
mtools.parse.links(
input_string,
number_of_the_matched_image_link_to_be_returned,
source_of_image_link_raw_or_href
);
//Examples
const text = ' www.link.one http://link.two https://link.three <a href= "link5" ></a> < a href = "link6" > test link </a>';
const links = mtools.parse.links(text);
//'www.link.one'
//defaults to 'raw' when no source is specified
const links = mtools.parse.links(text, 1);
//' http://link.two'
const links = mtools.parse.links(text, 1, 'href');
//'link6'
Formatters mtools.format
Text
Clean text elements, inline links and inline image links from text.
//API
mtools.format.text(input_string, returned_character_count);
//Examples
const text = '<b>bold</b> face';
const text = mtools.format.text(text);
//'bold face'
const text = mtools.format.text(text, 6);
//'bold f...'
//trimmed to 6 characters
Links
Clean unattached links from text.
//API
mtools.format.links(input_string, replacer_text);
//Examples
const text = 'www.Accra.city is the capital city of <a href="www.ghanaian.website" >Ghana</a>';
const text = mtools.format.links(text);
//' is the capital city of <a href="www.ghanaian.website" >Ghana</a>'
const text = mtools.format.links(text, '_');
//'_ is the capital city of <a href="www.ghanaian.website" >Ghana</a>'
Images
Clean unattached image links from text
//API
mtools.format.images(input_string, replacer_text);
//Examples
const text = 'i am doing my homework.gif on <img scr="english.png" />';
const text = mtools.format.images(text);
//'i am doing my on <img scr="" />'
const text = mtools.format.images(text, 'png', '_');
//'i am doing my homework.gif on <img scr="_" />'
const text = mtools.format.images(text, 'gif', '_');
//'i am doing my _ on <img scr="english.png" />'
const text = mtools.format.images(text, null, '_');
//'i am doing my _ on <img scr="_" />'
Builders mtools.build
Set of small utilities for building markup.
Hashtags
Build hyperlinks of all unattached hashtags in a string.
//API
mtools.build.hashtag(input_string, scheme);
//Examples
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';
const res = mtools.build.hashtags(text);
console.log(res);
//'hello there @mic, did you join the <a target="_blank" href="/trending/omg "> #omg </a> topic';
Mentions
Build hyperlinks of all unattached mentions in a string.
//API
mtools.build.mentions(input_string, scheme);
//Examples
const text = 'hello there @mic, did you join the #omg topic?';
const res = mtools.build.mentions(text, '/user');
console.log(res);
//'hello there <a target="_blank" href="/user/mic">@mic</a>, did you join the #omg topic?';
const res = mtools.build.mentions(text);
console.log(res);
//'hello there <a target="_blank" href="/@mic">@mic</a>, did you join the #omg topic?';
Links
Build link tags of all unattached links in a string.
//API
mtools.build.mentions(input_string, video_configs);
//Examples
const configs = {};
configs.width = 400;
configs.height = '300';
configs.frameborder = '2';
configs.attributes = 'data-id="video" onLoad="call_function_loaded()" ';
const text = 'hello there @mic, did you join the #omg topic for www.mybiggest.surprise ? oh, and do not miss this: https://www.youtube.com/watch?v=PKzOWZO_HWU';
const res = mtools.build.links(text, configs);
console.log(res);
//'hello there @mic, did you join the #omg topic for <a href="http://www.mybiggest.surprise">www.mybiggest.surprise</a> ? oh, and do not miss this:<iframe width="400" height="300" src="https://www.youtube.com/embed/PKzOWZO_HWU" frameborder="2" data-id="video" onLoad="call_function_loaded()" </iframe>'
const res = mtools.build.links(text);
console.log(res);
//'hello there @mic, did you join the #omg topic for <a href="http://www.mybiggest.surprise">www.mybiggest.surprise</a> ? oh, and do not miss this: <a href="https://www.youtube.com/watch?v=PKzOWZO_HWU">https://www.youtube.com/watch?v=PKzOWZO_HWU</a>'
Images
Build image tags of all unattached image links in a string.
//API
mtools.build.images(input_string);
//Examples
const text = 'any comments about my shot: my.big.surprise/boom.png';
const res = mtools.build.images(text);
console.log(res);
//'any comments about my shot: <img src="my.big.surprise/boom.png" /><br/>'
Template
Build a template using Mustache-style {{ double curly brackets }} variable placeholders.
//API
mtools.build.template(template_string, variables_object, placeholder_for_no_value);
//Examples
const text = 'please keep the {{var1}} in my {{var2}}{{var3}} ';
let obj = {};
obj.var1 = 'book';
obj.var2 = 'bag';
obj.var3 = ', thank you';
const res = mtools.build.template(text, obj);
console.log(res);
//'please keep the book in my bag, thank you'
let obj = {};
obj.var1 = 'book';
const res = mtools.build.template(text, obj);
console.log(res);
//'please keep the book in my '
let obj = {};
obj.var1 = 'book';
obj.var2 = 'bag';
const res = mtools.build.template(text, obj, '***');
console.log(res);
//'please keep the book in my bag***'
To Do
- Improve documentation.
- Support retuning of array by parser.
- Set default of
markup.parse.images()
to parse using bothraw
andsrc
modes when no default mode is set. - Set default of
markup.parse.links()
to parse using bothraw
andhref
modes when no default mode is set. - Document with JSDOC.
- Support parsing of thumbnails images from Youtube links.
- Provide playground to try out our REGEXes and helper functions.
Contributions
Are welcome, particularly for enabling support for parsing content from IPFS, DTube and other video sites.