Transform Plain Text Into Rich, Interactive Content – Rich Text Converter

Preview:

Description:

Rich Text Converter is a tiny JavaScript library that allows you to transform plain text into rich, interactive content by automatically converting hashtags into clickable links, rendering mentions as links to user profiles, and applying bold and underline formatting.

This means your users can easily click on hashtags and mentions to reach relevant pages, and your text becomes more engaging and easier to read.

How to use it:

1. Install & download the Rich Text Converter with NPM.

# NPM
$ npm install rich-text-converter

2. Import the Rich Text Converter into your project.

<!-- Browser -->
<script src="RichTextConvertor.js"></script>

// Node.js
const RichTextConverter = require('rich-text-converter');

3. Initialize and configure the RichTextConverter. The library allows you to define patterns for hashtags, mentions, bold text, and underlined text using regular expressions as follows:

const converter = new RichTextConverter({
  hashtags: {
    pattern: /#(\w+)/g,
    url: 'https://twitter.com/hashtag/$1',
  },
  mentions: {
    pattern: /@(\w+)/g,
    url: 'https://twitter.com/$1',
  },
  bold: {
    pattern: /\*\*(.*?)\*\*/g,
    replace: '$1',
  },
  underline: {
    pattern: /__(.*?)__/g,
    replace: '$1',
  },
});

4. Convert the plain text you provide into rich text.

const inputText = "Check out #javascript and follow @jqueryscript at **Twitter** and __Facebook__!";
const richText = converter.convert(inputText);

5. The resulting rich text output.

Check out <a href="https://twitter.com/hashtag/javascript">#javascript</a> and follow <a href="https://twitter.com/jqueryscript">@jqueryscript</a> at <strong>Twitter</strong> and <u>Facebook</u>!