React JS-如何使用React Markdown v8.0.3库转义方括号[h2]标题[/h2]

Question

我正在做一个React新闻组件，在那里我从API获得一些文本，我必须在我的UI中显示它。

我必须逃离的文本示例：

[img]｛STEAM_CLAN_IMAGE｝/3703047/17e3e74c5f323f431ec172c81940e81ad52588b3.jpg[/img]\n\n[h2]阿灵顿少校[/h2]\n DPC夏季巡回赛接近尾声。

前往[url=www.dota2.com/battlereport]完整更新网站[/url]了解所有详细信息。

如您所见，HTML标记用方括号[]标记，我不知道如何转义它们并转换为HTML标记。

此处编码：

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>)

括号被完全忽略，文本显示如下。

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

[h2]阿灵顿少校[/h2]DPC夏季巡回赛接近，阿灵顿少校提供了世界上最好的球队在竞争之路到达之前，在DPC积分的最后机会国际的在8月4日至14日期间，抓住所有的动作位于美国得克萨斯州阿灵顿。

前往[url=www.dota2.com/battlereport]完整更新网站[/url]了解所有详细信息。

我曾尝试使用JavaScript中的replace函数，但这个解决方案并不实用，我想知道是否有更好的解决方案。

如果你知道如何让所有文本只用一个div或一些html元素包装，因为React Markdown的实际行为是用p元素逐块包装。

Answer 1

这看起来不像markdown——它看起来像BBCode，这就是你遇到问题的原因。Markdown有一个非常具体的语法。

似乎有一些转换器可用。例如这个，或者这个(它有一个在线版本，你可以用来进行一些初步测试(。

你可能需要做一些搜索/研究才能找到最适合你的。

Answer 2

好的，安迪先生，多亏了你，我解决了这个问题。

因此，我将在这里为任何和我有同样问题的人提供这种类型的标记(BBCode(的函数。请注意，在将此函数应用于文本后，您仍然必须使用React Markdown将文本转换为HTML。

export function convertBBC(param) {
// preprocessing for tf2toolbox BBCode
if (param.search(/TF2Toolbox/gim) != -1) {
param = param
.replace(
/((List generated at .+?[/URL]))((?:.|n)+)/gim,
'$2nnn$1'
) //Move TF2Toolbox link to bottom
.replace('(List generated at', '(List generated from')
.replace(/[^Sn]+(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;
}

列表结果的图像

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

图像与图像的链接结果

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

再次感谢各位！