代码之家  ›  专栏  ›  技术社区  ›  Erik Kránicz

使用JavaScript用Regexp替换匹配的HTML标记

  •  -3
  • Erik Kránicz  · 技术社区  · 6 年前

    首先: 我知道通过DOM操作工具可以很容易地修改DOM结构。(在每个浏览器中,甚至在第三方库的节点中,都有这些功能。)

    他的问题的目的 如果有人能想出一个聪明的主意,如果这个问题可以用不带DOM的JavaScript中的Regexp解决。

    谢谢您![编辑结束]

    HTML代码段 作为一根弦 :

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

    <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"> 当然。

    我怎样才能正确使用 只是香草JS 以及 不使用 浏览器的?(即节点内)

    1 回复  |  直到 6 年前
        1
  •  0
  •   Luke Benting    6 年前

    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;
    

    注意:在段落元素中使用div是无效的,因此您将得到不可预测的结果。