在 Javascript 中使用正则表达式查找并更改 div

发布于 2024-08-23 21:31:56 字数 265 浏览 11 评论 0原文

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

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

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

How can I do this in javascript?

非常感谢，史蒂夫

原文

I am trying to first find a div using a regular expression (since its class name is somewhat dynamic).

Once found, I then need to place the div inside of a fieldset, so I end up having a final output of

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

How can I do this in javascript?

Much thanks,
Steve

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

英雄似剑 2024-08-30 21:31:56

这对于正则表达式来说很难做到，而且是不明智的。例如，如果 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 上的测试以确定是否需要操作它。

This is going to be difficult to do with regexes and ill-advised. For example, what if the div contains other divs? Finding the correct closing div tag is not something a regular expression can do because HTML is not a regular language.

On the other hand, this is a trivial one liner with jQuery:

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

It can of course be done with vanilla Javascript DOM using something like:

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]);
  }
}

You of course need to fill in what class to put on the fieldset and change the test on the div to figure out if you need to manipulate it or not.

回复收藏 0 原文

一向肩并 2024-08-30 21:31:56

使用 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='...' />");
}

using jquery, you can try this:

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='...' />");
}

回复收藏 0 原文

随波逐流 2024-08-30 21:31:56

   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 是一团糟。

   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>"; 
            }
        }

    }

No need to use regular expression, indexof method is sufficient. And no need to use jquery. Javascript has good string and array functions - use them, but the DOM is a mess.

回复收藏 0 原文

~没有更多了~