Whatsapp text format convert into html format

Question

Need help to convert whatsapp text format to html format and convert html format to whatsapp text format. Using php script or javascript.

*bold* to <strong>bold</strong>
<strong>bold</strong> to *bold*

_italic_ to <em>italic</em>
<em>italic</em> to _italic_

~strike~ to <del>strike</del>
<del>strike</del> to ~strike~

Answer 1

Try this:

 let strBold = '*bold*'; let replacedBold = strBold.replace(/\\*(?=\\w)/, '<strong>').replace(/(?<=\\w)\\*/, '</strong>') console.log(replacedBold); let strItalic = '_italic_'; let replacedItalic = strItalic.replace(/\\_(?=\\w)/, '<em>').replace(/(?<=\\w)\\_/, '</em>'); console.log(replacedItalic); let strStrike = '~strike~'; let replacedStrike = strStrike.replace(/\\~(?=\\w)/, '<del>').replace(/(?<=\\w)\\~/, '</del>'); console.log(replacedStrike);

Answer 2

Just insert the symbol and the html tag in the htmlFormat object and it will replace it on the string.

let string = 'hello I am *bold* text, and I am _italic_, I am ~line-through~ I am *bold again!*';

// html formatter
const htmlFormat = [
    { symbol: '*', tag: 'b' },
    { symbol: '_', tag: 'em' },
    { symbol: '~', tag: 'del' },
    { symbol: '`', tag: 'code' },
];

htmlFormat.forEach(({ symbol, tag }) => {
    if(!string) return;

    const regex = new RegExp(`\\${symbol}([^${symbol}]*)\\${symbol}`, 'gm');
    const match = string.match(regex);
    if(!match) return;

    match.forEach(m => {
        let formatted = m;
        for(let i=0; i<2; i++){
            formatted = formatted.replace(symbol, `<${i > 0 ? '/' : ''}${tag}>`);
        }
        string = string.replace(m, formatted);
    });
});

console.log(string); // hello I am <b>bold</b> text, and I am <em>italic</em>, I am <del>line-through</del> I am <b>bold again!</b>

Answer 3

Choose the perfect regex that will fit your needs. If you don't want styling to span through new line and also using ([^*<\\n]+) makes sure at least one character is in between styles or else ** without a character in-between will result will become invisible.

function format_text(text){
return text.replace(/(?:\*)([^*<\n]+)(?:\*)/g, "<strong>$1</strong>")
     .replace(/(?:_)([^_<\n]+)(?:_)/g, "<i>$1</i>")
      .replace(/(?:~)([^~<\n]+)(?:~)/g, "<s>$1</s>")
      .replace(/(?:```)([^```<\n]+)(?:```)/g, "<tt>$1</tt>")
}

•The downside to the above code is that, you can't nest styles ie *_Bold and italic_*

To allow nested styles use this 👇

format_text(text){
return text.replace(/(?:\*)(?:(?!\s))((?:(?!\*|\n).)+)(?:\*)/g,'<b>$1</b>')
   .replace(/(?:_)(?:(?!\s))((?:(?!\n|_).)+)(?:_)/g,'<i>$1</i>')
   .replace(/(?:~)(?:(?!\s))((?:(?!\n|~).)+)(?:~)/g,'<s>$1</s>')
   .replace(/(?:--)(?:(?!\s))((?:(?!\n|--).)+)(?:--)/g,'<u>$1</u>')
   .replace(/(?:```)(?:(?!\s))((?:(?!\n|```).)+)(?:```)/g,'<tt>$1</tt>');

// extra:
// --For underlined text--
// ```Monospace font```
}

👆 If you want your style to span through new line, then remove \\n from the regex. Also if your new line is html break tag, you can replace \\n with <br>