除了允许的标签外，如何删除 HTML 标签以及 id？

Question

这里是一些示例文本：

"-A3-<tag1>Sale</tag1>-cum-</blockquote><p <tag1>id</tag1>=\"p_12\"> </p><p 
<tag1>id</tag1>=\"p_13\">        Gift <tag1>Deed</tag1> <tag1>executed</tag1> by C.K. Koshy 
<tag1>in</tag1> favour <tag1>of</tag1> Quilon Diocese         <tag1>and</tag1> C.K."

我想知道如何删除<p> 标签、<blockquote> 标签以及所有id，但我想保留<tag>。仅当<tag> 环绕p、blockquote 或id 我想删除它。一直休息。我如何在 JavaScript 中做到这一点？我尝试了以下模式的正则表达式：

test = test.replace(/<(?!tag\s*\/?)[^>]+>/g, '')

这并没有产生令人满意的结果。这就是我的目标（期望的输出）：

"-A3-<tag1>Sale</tag1>-cum- Gift <tag1>Deed</tag1> <tag1>executed</tag1> by C.K. Koshy 
<tag1>in</tag1> favour <tag1>of</tag1> Quilon Diocese  <tag1>and</tag1> C.K."

我如何得到这是 JS？

Answer 1

您可以将string 解析为 HTML 并使用 DOM 操作来删除元素，这是一个示例：

let input = `-A3-<tag1>Sale</tag1>-cum-</blockquote><p <tag1>id</tag1>="p_12"> </p><p 
<tag1>id</tag1>="p_13">        Gift <tag1>Deed</tag1> <tag1>executed</tag1> by C.K. Koshy 
<tag1>in</tag1> favour <tag1>of</tag1> Quilon Diocese         <tag1>and</tag1> C.K.`

input = input.replace(/<tag1>id<\/tag1>/g, "id");

const doc = new DOMParser().parseFromString(input, 'text/html');

doc.querySelectorAll('blockquote, p').forEach((e) => {
  [...e.childNodes].forEach(child => {
    e.before(child);
  });
  e.remove();
});

const output = doc.body.innerHTML;
console.log(output);

这样做是首先使用一些正则表达式将原始输入转换为有效的 HTML，然后遍历所有 <blockquote> 和 <p> 元素以提取所有子节点并将它们插入到它们的父节点之前，一旦是完成后，将删除空的 <blockquote> 和 <p> 元素。

Answer 2

在处理 HTML（或任何 XML）时，正则表达式永远不是答案。陷阱太多了。

相反，您会想要了解实际结构的 jQuery 或 Cheerio（它模仿 jQuery 的 API，但只包含用于转换和操作 HTML 的东西而没有额外的东西）。如果您信任内容，您还可以使用innerHTML 将 HTML 转储到 HTML 元素中，并使用 querySelector() 访问它。

然后只需选择您不想要的元素并删除它们即可。

这是使用第三个选项的示例：

const content = '<p>a</p><p>b</p><tag>c</tag><tag><p>d</p></tag><blockquote>e</blockquote>';
const dummy = document.querySelector('#dummy');
const output = document.querySelector('#output');

dummy.innerHTML = content;

const toRemove = Array.from(dummy.querySelectorAll('p, tag, blockquote')).filter(el =>
  // for the "element containing certain element" you can't do that with selector along, but can with a filter method
  !(
   (el.tagName === 'P' && el.parentNode.tagName === 'TAG')
     || (el.tagName === 'TAG' && el.querySelector('p'))
  )
);

toRemove.map(el => el.parentNode.removeChild(el));

output.innerHTML = dummy.innerHTML;
dummy.innerHTML = ''; // empty it out

<div id="dummy"></div>
<div id="output"></div>