将innerHtml替换为区分大小写

Question

我从使用REST API的CMS获得一个博客帖子html内容作为字符串。我正在使用CK编辑器编写帖子内容。如果我在ck编辑器中使用code标记，它将生成以下HTML字符串:

<pre>
<code class="language-python">
a = 1 + 2
</code>
</pre>

我正在使用上面的字符串并将pre code标记替换为字符串SyntaxHighlighter，以便我可以突出显示react中的语法。它是react-syntax-highlighter库用来突出显示语法的自定义标记，我将其存储在字符串"postContent"中。转换后的字符串是这样的:

<SyntaxHighlighter language="python" style={dark}>
a = 1 + 2
</SyntaxHighlighter>

我将这个字符串传递给react Post组件，然后它会呈现HTML内容。

<div dangerouslySetInnerHTML={{ __html: props.postContent }}>

我也试过react-html-parser。这两个方法，转换"SyntaxHighlighter";syntaxhighlighter"破解代码

如果不可能，是否有其他方法可以达到我的目的?

Answer 1

SyntaxHighlighter是一个React组件，所以如果你使用dangerousSetInnerHTML将其放入适当的位置，它将不起作用-这适用于HTML，而不是JSX。

您在正确的轨道上使用react-html-parser-您可以解析来自文章的内容，然后使用其令人愉快的transform选项转换<code>片段，该选项允许您拦截任何节点并提供替换元素:

function transform(node) {
if (node.type === "tag" && node.name === "code") {
return (
<SyntaxHighlighter language="python" style={dark}>
{node.children[0].data}
</SyntaxHighlighter>
);
}
}
// ReactHtmlParser(testInput, { transform })

沙箱