-2

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~
user2976046
  • 13
  • 1
  • 3

3 Answers3

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 i.e *_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>

The concise
  • 444
  • 4
  • 12
0

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);
sonEtLumiere
  • 4,461
  • 3
  • 8
  • 35
0

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>
Asaf
  • 949
  • 2
  • 13
  • 14