javascript - 在 Javascript 中使用正则表达式查找和更改 div

Question

我试图首先使用正则表达式找到一个 div （因为它的类名有点动态）。

找到后，我需要将 div 放在字段集中，因此最终输出为

<fieldset class="...">
    <div class="the one I found">...</div>
</fieldset>

我怎样才能在javascript中做到这一点？

非常感谢，史蒂夫

Answer 1

使用正则表达式和不明智的做法将很难做到这一点。例如，如果 div 包含其他 div 怎么办？正则表达式无法找到正确的结束 div 标签，因为 HTML 不是常规语言。

另一方面，这是一个简单的jQuery衬里：

$("div.someClass").wrap("<fieldset class='...'></fieldset>");

它当然可以使用 vanilla Javascript DOM 来完成，使用如下：

var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++) {
  if (divs[i].className == "...") {
    var fs = document.createElement("fieldset");
    fs.className = "...";
    var parent = divs[i].parentNode;
    parent.insertBefore(fs, divs[i]);
    fs.appendChild(divs[i]);
  }
}

您当然需要填写要放在字段集上的类并更改 div 上的测试以确定是否需要对其进行操作。

Answer 2

使用jquery，你可以试试这个：

var classes = $(document.body).html().match(/class="pattern"/g); // find classname matchin pattern 
for(i in classes) {
  var nodes = $('.'+classes[i].substr (7, str.length - 8));
  nodes.wrap("<fieldset class='...' />");
}

Answer 3

   window.onload = function() {

        var params = {
            has: "something"
        };

       // var fieldset = doc... get field the same as with div. 

        var divs = document.getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
            if (params.has.indexOf(divs[i].className) > 0) {
             //  fieldset.innerHTML  = divs[i].innerHTML;
               divs[i].innerHTML = "<fieldset class=''> + divs[i].innerHTML + "</fieldset>"; 
            }
        }

    }

不需要使用正则表达式，indexof方法就足够了。并且不需要使用jquery。Javascript 有很好的字符串和数组函数——使用它们，但是 DOM 是一团糟。