Whatsapp文本格式转换成html格式

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>