在其他类型的元素之前删除一个类型的所有元素

Remove all elements of a type before an element of a different type

本文关键字：类型 元素 一个 删除 其他      更新时间：2023-09-26

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

例如，在下面的字符串中，我希望删除出现在第一个<p>元素之前的任何<br>元素。

样本输入：

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

预期输出：

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

$("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>");

如果您使用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>

进一步阅读：

  • 文档对象模型（DOM）
  • Document.createElement
  • Element.innerHTML
  • Node.childNodes
  • 元素标签名称
相关文章：