刪除頂級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; }));