Question

[编辑] 首先：我知道通过DOM操作工具，您可以轻松修改DOM结构。（这些在每个浏览器中都可用，甚至在第三方库的Node中也可用。）

他的问题的目标是，如果有问题可以通过没有DOM的JavaScript中的Regexp解决，那么有人可以提出一个聪明的想法。

谢谢！[编辑结束]

假设我将以下 HTML代码段 作为字符串：

<p>
    <div class="something">
        <span>
            <div class="else">My precious text.</div>
        </span>
    </div>
</p>

我希望用 RegExp 删除<div class="something">标签以获得类似的内容（缩进无关紧要）：

<p>
    <span>
        <div class="else">My precious text.</div>
    </span>
</p>

所以，我的尝试是：

htmlString.replace(/<div class="something">([\s\S]+?)<\/div>/gi, "$1");

但它当然会匹配<div class="else">的结束标记。

如何使用只是vanilla JS 以及不使用 浏览器的DOM操作工具来正确地执行此操作？（即在节点中）

Answer 1

Regex不是最好的选择。如果您正在处理HTML，那么您最好使用JS的查询功能，这里是您可以执行的操作的简单示例（出于解释目的过于简化）：

var htmlString = '<p><div class="something"><span><div class="else">My precious text.</div></span></div></p>';

//Create a DOM element so you can query what you need and manipulate it
var newElement = document.createElement("p");
newElement.innerHTML = htmlString;

//Find what you need to remove
var toRemove = newElement.getElementsByClassName("something")[0];
//Grab what you need to keep
var toKeep = toRemove.firstChild;

//Remove the unwanted element
newElement.removeChild(toRemove);

//Append the old child
newElement.appendChild(toKeep);

//If you really want it back as a string
newElement.outerHTML;

PS：在段落元素中设置div是无效的，因此您将获得不可预测的结果。

使用JavaScript

1 个答案: