删除顶级html标签之间的字符

Question

总之，我正在寻找一种防弹解决方案来从 HTML 标记之间删除 \\n 以制作格式良好的 HTML，而不是我收到的怪癖模式字符串。

更长的解释：我有一个包含 HTML 的字符串。 在我需要删除的一些顶级标签之间有 \\n 字符串，但我不能从标签内容中删除 \\n。

例子：

<p class='A'>AA A AAA</p>\n   \n  \n <p class='B'>BB BB \n BB\nBBB BB</p>

段落之间的\\n 需要离开，但class=B 的段落中的\\n 必须保留。 这是一个捏造的例子 - 在现实世界中没有预定义的类等，我只得到具有不可预测内容的 para 标签。

我尝试了什么：

• 简单的字符串替换已经过时了，因为它当然碰到了必须保留的第二个 para 元素中的 \\n。
• 我一直在寻找一个 regexp 解决方案，但无法理解如何让它们按需要有选择地工作。 尽管正则表达式很聪明，但我认为它仍然可以看到“流”而不是“结构”
• 我尝试将 HTML 加载到 div 中并拉回该 div 的 HTML，希望它能“清理”intertag \\n，但事实并非如此。

这是我当前使用 jquery 进行清理的解决方案。 这仅对我有用，因为我知道我不想在顶级标签之间保留任何文本。 也不能递归清理孙子或更低，因为任何文本都会丢失。

 var dIn = $('#in'); // div to act as container to load subject html var dOut = $('#out'); // div to act as container for cleaing op var sOut=''; // string to accumulate output var sIn = "<p class='A'>AA A\\n AAA</p>\\n \\n \\n <p class='B'>BB BB \\n BB\\nBBB BB<span>CC\\nC</p>"; $('#t1').val(sIn); // display starting string dIn.html(sIn); // load input string into a div element dIn.children().each(function(){ // walk the children of the container dOut.append($(this)); // append each child of input container to output container sOut = sOut + dOut.html(); // and yank the output containers html to give the tag-only content dOut.html(''); // last clear the output container for the next pass }) // show the results $('#t2').val(sOut);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="in"></div> <div id="out"></div> <div id="info"> <textarea id='t1' rows='10' cols='40'> </textarea> <textarea id='t2' rows='10' cols='40'> </textarea> </div>

注意：如果评论丢失，这篇文章解释了为什么正则表达式不起作用。 @melpomene 的道具。

Answer 1

正则表达式在处理 HTML 文档时很棘手，因为元素可以相互嵌套让您意识到导致复杂性的不同事物，让您处于可怕的境地并提供令人讨厌的错误解决方法，这对我来说意味着头痛。

改用解析器。 DOM 解析器实际上不是基于正则表达式的解析器。 下面的 DOM 解决方案适用于在这一点上不同于 RegEx 解决方案的第一级节点。

DOM 解决方案：

 var html = `<p class='A'>AA A AAA</p> <p class='B' test required >BB BB BB BBB BB</p>` var parser = new DOMParser(); var doc = parser.parseFromString(html, "text/html"); // Only immediate children of body var query = doc.evaluate('//body/*/following-sibling::text()', doc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); for (let i = 0, length = query.snapshotLength; i < length; i++) { query.snapshotItem(i).textContent = query.snapshotItem(i).textContent.replace(/\\n/g, ""); } console.log(doc.body.innerHTML);

RegEx 解决方案（不是首选 - 它寻找分别位于彼此旁边的结束标签和开始标签）：

 var html = `<p class='A'>AA A AAA</p> <p class='B' test required >BB BB BB BBB BB</p>` console.log(html.replace(/(<\\/\\w+>)([^<>]+)(<\\w+(?:\\s+[\\w-]+(?:\\s*=\\s*(?:"[^"\\\\]*(?:\\\\.[^"\\\\]*)*"|'[^'\\\\]*(?:\\\\.[^'\\\\]*)*'))?)*\\s*>)/g, function(match, $1, $2, $3) { return $1 + $2.replace(/\\n/g, '') + $3; }));