时间戳

首页 > 解决方案 > 替换非 html 并用正确的语法替换它

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

问题描述

我有一个源程序，它提供带有非 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。标签将出现在具有“标签组件”类的 div 中，将有多个具有“标签组件”类的 div（因此页面上出现多次错误标签）。

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

标签： javascripthtml

解决方案

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

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(/<([A-Z/])>/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，因为开始和结束标签的数量不匹配。如果这不仅仅是您的示例中的错误，您将看到一个更复杂的解决方案，并且需要指定期望的行为应该是什么。

推荐阅读