Skip to content

Repository files navigation

Pull requestsBuild statusCodebase license

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

<scriptsrc="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

consttext='<b>hello</b>';constres=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;

//APImtools.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 textconsttext=' 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.';constschool_thumbnail=mtools.parse.images(text,null,null,'src');//'www.ko.fi/sch/img'constkofi_thumbnail=mtools.parse.images(text);//'mycomputer.home/kofi.png'//with no specified source, defaults to 'raw'

Advanced use

consttext=' 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 extensionmtools.img.get(text,2,'.png','raw');//is the same asmtools.img.get(text,2,'png','raw');//Examplesconsole.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 setconsole.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.

//APImtools.parse.links(input_string,number_of_the_matched_image_link_to_be_returned,source_of_image_link_raw_or_href);//Examplesconsttext=' www.link.one http://link.two https://link.three <a href= "link5" ></a> < a href = "link6" > test link </a>';constlinks=mtools.parse.links(text);//'www.link.one'//defaults to 'raw' when no source is specifiedconstlinks=mtools.parse.links(text,1);//' http://link.two'constlinks=mtools.parse.links(text,1,'href');//'link6'

Formatters mtools.format

Text

Clean text elements, inline links and inline image links from text.

//APImtools.format.text(input_string,returned_character_count);//Examplesconsttext='<b>bold</b> face';consttext=mtools.format.text(text);//'bold face'consttext=mtools.format.text(text,6);//'bold f...'//trimmed to 6 characters

Links

Clean unattached links from text.

//APImtools.format.links(input_string,replacer_text);//Examplesconsttext='www.Accra.city is the capital city of <a href="www.ghanaian.website" >Ghana</a>';consttext=mtools.format.links(text);//' is the capital city of <a href="www.ghanaian.website" >Ghana</a>'consttext=mtools.format.links(text,'_');//'_ is the capital city of <a href="www.ghanaian.website" >Ghana</a>'

Images

Clean unattached image links from text

//APImtools.format.images(input_string,replacer_text);//Examplesconsttext='i am doing my homework.gif on <img scr="english.png" />';consttext=mtools.format.images(text);//'i am doing my on <img scr="" />'consttext=mtools.format.images(text,'png','_');//'i am doing my homework.gif on <img scr="_" />'consttext=mtools.format.images(text,'gif','_');//'i am doing my _ on <img scr="english.png" />'consttext=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.

//APImtools.build.hashtag(input_string,scheme);//Examplesconsttext='hello there @mic, did you join the #omg topic';constres=mtools.build.hashtags(text,'/hot');console.log(res);//'hello there @mic, did you join the <a target="_blank" href="/hot/omg "> #omg </a> topic';constres=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.

//APImtools.build.mentions(input_string,scheme);//Examplesconsttext='hello there @mic, did you join the #omg topic?';constres=mtools.build.mentions(text,'/user');console.log(res);//'hello there <a target="_blank" href="/user/mic">@mic</a>, did you join the #omg topic?';constres=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.

//APImtools.build.mentions(input_string,video_configs);//Examplesconstconfigs={};configs.width=400;configs.height='300';configs.frameborder='2';configs.attributes='data-id="video" onLoad="call_function_loaded()" ';consttext='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';constres=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>'constres=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.

//APImtools.build.images(input_string);//Examplesconsttext='any comments about my shot: my.big.surprise/boom.png';constres=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.

//APImtools.build.template(template_string,variables_object,placeholder_for_no_value);//Examplesconsttext='please keep the {{var1}} in my {{var2}}{{var3}} ';letobj={};obj.var1='book';obj.var2='bag';obj.var3=', thank you';constres=mtools.build.template(text,obj);console.log(res);//'please keep the book in my bag, thank you'letobj={};obj.var1='book';constres=mtools.build.template(text,obj);console.log(res);//'please keep the book in my 'letobj={};obj.var1='book';obj.var2='bag';constres=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 both raw and src modes when no default mode is set.
  • Set default of markup.parse.links() to parse using both raw and href 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.

About

Utilities for manipulating html string

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages