替换非 html 并用正确的语法替换它

Question

我有一个源程序，它提供带有非 html 标记和不正确语法的文本。 例如：

the <H>quick</> brown fox.
the <U>quick</> brown fox.
<H><U>The</> quick brown fox.
<H><U>The</> quick </> brown fox.

结果应该是这样的：

敏捷的棕色狐狸。

敏捷的棕色狐狸。

敏捷的棕色狐狸。

敏捷的棕色狐狸。

所以使用的标签不是 html-valid，也不是应该关闭的。 我正在努力让它在 javascript 中工作。

从以下内容开始：

var s = document.getElementById('root').innerHTML;
s = s.replace("&lt;H&gt;", "<b>");  
s = s.replace("&lt;h&gt;", "<b>");    
s = s.replace("&lt;/&gt;","</b>");   
document.getElementById('root').innerHTML = s;

root 是所有包含的 div。 标签将出现在带有 class “标签组件”的 div 中，将有多个带有 class “标签组件”的 div（因此页面上的错误标签多次出现）。

我怎样才能最好地解决这个问题？

Answer 1

可能最容易编写一个使用堆栈来跟踪仍需要关闭的标签的小型解析器/处理器：

 const s1 = 'the <H>quick</> brown fox.'; const s2 = 'the <U>quick</> brown fox.'; const s3 = '<H><U>The</> quick brown fox.'; const s4 = '<H><U>The</> quick </> brown fox.'; const process = (s) => { const map = {'H': 'b', 'U': 'i'}; const stack = []; return s.replace(/<([AZ/])>/g, (_, t) => { if (map[t]) { stack.push(map[t]); return `<${map[t]}>`; } else { return `</${stack.pop()}>`; } }); }; console.log(process(s1)); console.log(process(s2)); console.log(process(s3)); console.log(process(s4));

您的第三个示例仍然无效 HTML，因为打开和关闭标签的数量不匹配。 如果这不仅仅是您的示例中的错误，您将看到一个更复杂的解决方案，并且需要指定期望的行为应该是什么。

Answer 2

在我看来，在这种情况下，最好的方法是在 VS Code 等编辑器中打开 html 文档并使用查找和替换工具。 您还应该使用 VS Code 的HTMLHint 扩展来突出显示 html 文档中的所有问题。