I am doing a React News Component where I get some text from an API and I have to display it in my UI.

Sample of the text I have to escape:

[img]{STEAM_CLAN_IMAGE}/3703047/17e3e74c5f323f431ec172c81940e81ad52588b3.jpg[/img]\n\n[h2]The Arlington Major[/h2]\nThe Summer Tour of the DPC draws to a close.

Head over to the [url=www.dota2.com/battlereport]full update website[/url] for all the details.

As you can see, the HTML tags are marked with brackets [ ] and I don't know how to escape them and to convert in html tags.

Code here:

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import React from 'react;

return (<div>
        <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[rehypeRaw]}
        components={{ h2: 'p'}}>
        {text}
      </ReactMarkdown>
        </div>)

The brackets are being literally ignored and the text is displayed as you can see below.

[img]{STEAM_CLAN_IMAGE}/3703047/17e3e74c5f323f431ec172c81940e81ad52588b3.jpg[/img]

[h2]The Arlington Major[/h2] The Summer Tour of the DPC draws to a close, and The Arlington Major offers the best teams in the world a final chance at DPC points before the competitive road reaches The International. Catch all the action as it unfolds from August 4 - 14 in Arlington, Texas, USA.

Head over to the [url=www.dota2.com/battlereport]full update website[/url] for all the details.

I've tried to use the replace function from JavaScript but this solution is not really practical and I would like to know if there are better and nicer solutions.

And if you know how to make all the text to be wrapped with only a div or some html element because the actual behaviour of React Markdown is to wrap it block by block with a p element.

CodePudding user response：

Okay mister Andy, I've fixed the problem thanks to you.

So I will let here the function for this type of markup (BBCode) for anyone that have the same problem as me. Take in consideration after you apply this function on your text you still have to use React Markdown to convert the text to HTML.

  export function convertBBC(param) {
  // preprocessing for tf2toolbox BBCode
  if (param.search(/TF2Toolbox/gim) != -1) {
    param = param
      .replace(
        /(\(List generated at . ?\[\/URL\]\))((?:.|\n) )/gim,
        '$2\n\n\n$1'
      ) //Move TF2Toolbox link to bottom
      .replace('(List generated at', '(List generated from')
      .replace(/[^\S\n] \(List/gim, '(List')
      .replace(/\[b\]\[u\](. ?)\[\/u\]\[\/b\]/gim, '[b]$1[/b]\n') //Fix double emphasized titles
      .replace(/(\n)\[\*\]\[b\](. ?)\[\/b\]/gim, '$1[*] $2');
  }

  const STEAM_CLAN_IMAGE =
    'https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/clans/';

  //general BBcode conversion
  param = param
    .replace(/\[b\]((?:.|\n) ?)\[\/b\]/gim, '**$1**') //bold; replace [b] $1 [/b] with ** $1 **
    .replace(/\[\i\]((?:.|\n) ?)\[\/\i\]/gim, '*$1*') //italics; replace [i] $1 [/u] with * $1 *
    .replace(/\[\u\]((?:.|\n) ?)\[\/\u\]/gim, '$1') //remove underline;
    .replace(/\[s\]((?:.|\n) ?)\[\/s\]/gim, '~~ $1~~') //strikethrough; replace [s] $1 [/s] with ~~ $1 ~~
    .replace(/\[center\]((?:.|\n) ?)\[\/center\]/gim, '$1') //remove center;
    .replace(/\[quote\=. ?\]((?:.|\n) ?)\[\/quote\]/gim, '$1') //remove [quote=] tags
    .replace(/\[size\=. ?\]((?:.|\n) ?)\[\/size\]/gim, '## $1') //Size [size=] tags
    .replace(/\[color\=. ?\]((?:.|\n) ?)\[\/color\]/gim, '$1') //remove [color] tags
    .replace(
      /\[list\=1\]((?:.|\n) ?)\[\/list\]/gim,
      function (match, p1, offset, string) {
        return p1.replace(/\[\*\]/gim, '1. ');
      }
    )
    .replace(/{STEAM_CLAN_IMAGE}/gim, STEAM_CLAN_IMAGE)
    .replace(/\[img\]((?:.|\n) ?)\[\/img\]/gim, '![$1]($1)')

    .replace(/\[url=(. ?)\]((?:.|\n) ?)\[\/url\]/gim, '[$2]($1)')
    .replace(/\[\h2\]((?:.|\n) ?)\[\/\h2\]/gim, '*$1*')
    .replace(/\[\h1\]((?:.|\n) ?)\[\/\h1\]/gim, '<h1>$1</h1>')
    .replace(/(\n)\[\*\]/gim, '$1* ') //lists; replcae lists with   unordered lists.
    .replace(/\[\/*list\]/gim, '')
    .replace(/\[img\]((?:.|\n) ?)\[\/img\]/gim, '![$1]($1)')
    .replace(/\[url=(. ?)\]((?:.|\n) ?)\[\/url\]/gim, '[$2]($1)')
    .replace(/\[code\](.*?)\[\/code\]/gim, '`$1`')
    .replace(
      /\[code\]((?:.|\n) ?)\[\/code\]/gim,
      function (match, p1, offset, string) {
        return p1.replace(/^/gim, '    ');
      }
    )
    .replace(/\[php\](.*?)\[\/php\]/gim, '`$1`')
    .replace(
      /\[php\]((?:.|\n) ?)\[\/php\]/gim,
      function (match, p1, offset, string) {
        return p1.replace(/^/gim, '    ');
      }
    )
    .replace(/\[pawn\](.*?)\[\/pawn\]/gim, '`$1`')
    .replace(
      /\[pawn\]((?:.|\n) ?)\[\/pawn\]/gim,
      function (match, p1, offset, string) {
        return p1.replace(/^/gim, '    ');
      }
    );

  //post processing for tf2toolbox BBCode
  if (param.search(/TF2Toolbox/gim) != -1) {
    param = param
      .replace(
        '/bbcode_lookup.php))',
        "/bbcode_lookup.php) and converted to /r/tf2trade ready Markdown by Dum's [converter](http://jondum.github.com/BBCode-To-Markdown-Converter/))."
      ) //add a linkback
      .replace(/\*\*. ?\*\*[\s] ?None[\s]{2}/gim, ''); //remove empty sections
  }
  return param;
}

IMAGE FOR LISTS OUTCOME

 <ReactMarkdown
              remarkPlugins={[remarkGfm]}
              rehypePlugins={[rehypeRaw]}
              components={{ list: 'ol', h1: 'h4' }}
            >
              {convertBBC(body)}
            </ReactMarkdown>

IMAGE FOR LINKS WITH IMAGES OUTCOME

<ReactMarkdown
            remarkPlugins={[remarkGfm]}
            rehypePlugins={[rehypeRaw]}
          >
            {convertBBC(location.state.body)}
          </ReactMarkdown>

Thanks again guys!

CodePudding user response：

That doesn't look like markdown - it looks like BBCode which is why you're running into problems. Markdown has a very specific syntax.

There seem to be a few converters available. For example this one, or perhaps this one (which has an online version that you can use for some preliminary testing).

You may have to do a little searching/research to find one that works best for you.