Question

如何在不同类型的元素之前删除类型的所有元素？

例如，在以下字符串中，我想删除在第一个<br>元素之前出现的所有<p>元素。

示例输入：

var myString = "<br><br><br><br><p>Hello there!</p><br><br><br><br>";

预期产出：

var myString = "<p>Hello there!</p><br><br><br><br>";

Answer 1

$("p:first").prevAll("br").remove();

（更新）如果你有一个字符串：

$("<div>"+myString+"</div>").find("p:first").prevAll("br").remove();

将其视为纯文本而不是jQuery对象

var arr = '<br><br><br><br><p>text</p><br><p>text121</p>'.split("<p>");
arr.splice(0,1);
arr.join("<p>");

Answer 2

如果您正在使用HTML，则应使用HTML解析器。当然，您提供的字符串可能是直接且简单的，但如果您使用的是RegExp或字符串函数，则考虑HTML的不同变体会使您的脚本复杂化。让HTML解析器为您完成艰苦的工作，然后使用现有的函数来实现您的目标。

您可以将浏览器的HTML解析器与Native DOM API：

一起使用

使用document.createElement()创建一个临时元素（但不必将其附加到文档中）。
将您的字符串传递给新创建元素的Element.innerHTML属性。

现在您已将字符串转换为HTML，我们可以使用Native DOM API方法来处理它。

下一步是使用Node.childNodes属性获取新创建元素的子节点列表。此属性返回实时列表，因此添加或删除项目将更新列表，这意味着我们无法以与非实时列表相同的方式遍历列表。

我使用while循环，只要列表中有元素，并且当前索引中有一个元素，它将继续。

然后我们针对Element.tagName（将以大写字母返回）执行一些检查：

如果我们到达请求的stop元素，我们应该退出循环。
如果我们点击的元素不是我们要删除的类型的元素，我们应该跳过它。

如果当前元素通过了这些检查，请将其删除。

循环完成后，返回生成的HTML字符串。

function trimLeadingBreaks(string, remove, stop) {
    var div = document.createElement('div');
    div.innerHTML = string;
  
    var children = div.childNodes;
    var index = 0;

    while(children.length && !!children[index]) {
        if(children[index].tagName === stop) break;
        if(children[index].tagName !== remove && ++index) continue;

        div.removeChild(children[index]);
    }
  
    return div.innerHTML;
}

function demo(string, remove, stop) {
    var trimmed = trimLeadingBreaks(string, remove, stop);
    document.getElementById('result').textContent += trimmed + "\n";
    return demo;
}

demo('<br><br><br><br><p>Hello there!</p><br><br><br><br>', 'BR', 'P')
    ('<br><br><i></i><br><br><p>Hello there!</p><br><br><br><br>', 'BR', 'P')
    ('<br><br><i></i><br><br><p>Hello there!</p><br><br><br><br>', 'I', 'P');

<pre id="result"></pre>

进一步阅读：

在不同类型的元素之前删除类型的所有元素

2 个答案: