Javascript/JQuery从字符串中删除数据

我在努力理解一些事情。通过执行以下操作，我得到了一个html代码字符串

var formDataUnformatted = $("#content").html();

<div class="form-group ui-draggable ui-draggable-handle element" data-type="text"><div class="close">×</div>
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

<div class="form-group">
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

var cleanFormData = formDataUnformatted.replace(/\t/, "").replace(/ ui-draggable| element/gi, "").replace(/<div class="close">.<\/div>/g, "").replace(/ data-(.+)="(.+)"/g, "");

<div class="form-group-handle">
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

如果我输出formDataUnformatted，我会得到如下结果

var formDataUnformatted = $("#content").html();

<div class="form-group ui-draggable ui-draggable-handle element" data-type="text"><div class="close">×</div>
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

<div class="form-group">
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

var cleanFormData = formDataUnformatted.replace(/\t/, "").replace(/ ui-draggable| element/gi, "").replace(/<div class="close">.<\/div>/g, "").replace(/ data-(.+)="(.+)"/g, "");

<div class="form-group-handle">
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

×
文本输入

现在有了上面的内容，我需要删除一些类，并去掉一个div

var formDataUnformatted = $("#content").html();

<div class="form-group ui-draggable ui-draggable-handle element" data-type="text"><div class="close">×</div>
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

<div class="form-group">
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

var cleanFormData = formDataUnformatted.replace(/\t/, "").replace(/ ui-draggable| element/gi, "").replace(/<div class="close">.<\/div>/g, "").replace(/ data-(.+)="(.+)"/g, "");

<div class="form-group-handle">
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

文本输入

为了做到这一点，我做了以下几点

var formDataUnformatted = $("#content").html();

<div class="form-group ui-draggable ui-draggable-handle element" data-type="text"><div class="close">×</div>
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

<div class="form-group">
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

var cleanFormData = formDataUnformatted.replace(/\t/, "").replace(/ ui-draggable| element/gi, "").replace(/<div class="close">.<\/div>/g, "").replace(/ data-(.+)="(.+)"/g, "");

<div class="form-group-handle">
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

var cleanFormData=formDataUnformatted.replace（/\t/，“”）。replace（/ui-draggable | element/gi，“”）。replace（//g，“”）。replace（/data-（.+）=“（.+）”/g，“”）；

现在这几乎完成了我需要它做的一切，但有一件事我不明白。如果我输出cleanFormData，我会得到以下结果

var formDataUnformatted = $("#content").html();

<div class="form-group ui-draggable ui-draggable-handle element" data-type="text"><div class="close">×</div>
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

<div class="form-group">
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

var cleanFormData = formDataUnformatted.replace(/\t/, "").replace(/ ui-draggable| element/gi, "").replace(/<div class="close">.<\/div>/g, "").replace(/ data-(.+)="(.+)"/g, "");

<div class="form-group-handle">
    <label for="text_input" class="control-label col-sm-4">Text Input</label>
    <div class="controls col-sm-7">
        <input id="text_input" class="form-control" name="text_input" type="text">
    </div>
</div>

文本输入

现在，这是完美的，除了它在表单组中添加了-handle。我不需要表单组句柄，我只希望它是表单组

这个把手是从哪里来的

---

谢谢

不要用正则表达式解析HTML，而是使用DOM节点

var formDataUnformatted = $("#content").clone();

formDataUnformatted.find('.form-group').attr('class', 'form-group');

var html = formDataUnformatted.html();

---

不要用正则表达式解析HTML，而是使用DOM节点

var formDataUnformatted = $("#content").clone();

formDataUnformatted.find('.form-group').attr('class', 'form-group');

var html = formDataUnformatted.html();

---

更改

替换（/ui可拖动句柄| ui可拖动元素/gi“）

至

替换（/ui可拖动元素/gi“）

更改

替换（/ui可拖动句柄| ui可拖动元素/gi“）

至

替换（/ui可拖动元素/gi“）

它是从

ui可拖动句柄获取的。更改
replace（）
以匹配整个内容，而不是
ui可拖动的

另外，不建议使用正则表达式来操作HTML。
它是从
ui可拖动句柄获取的。更改
replace（）
以匹配整个内容，而不是
ui可拖动的

此外，不建议使用正则表达式来处理HTML。
如果要更改原始元素

var html = $("#content").find(".form-group")
  .attr('class', 'form-group')[0].outerHTML;

  alert(html);


要删除
.close
div，只需将此行置于另一行之上

$("#content").find(".form-group").find(".close").remove();

如果您希望只获取修改后的html而不更改原始的

var html = $("#content").clone().find(".form-group")
      .attr('class', 'form-group')[0].outerHTML;



如果您想更改所有这些选项，可以执行以下操作：

$("#content").find(".form-group").each(function(){
    var html = $(this).attr('class', 'form-group')[0].outerHTML;
    alert(html);
});

如果要更改原始元素

var html = $("#content").find(".form-group")
  .attr('class', 'form-group')[0].outerHTML;

  alert(html);


要删除
.close
div，只需将此行置于另一行之上

$("#content").find(".form-group").find(".close").remove();

如果您希望只获取修改后的html而不更改原始的

var html = $("#content").clone().find(".form-group")
      .attr('class', 'form-group')[0].outerHTML;



如果您想更改所有这些选项，可以执行以下操作：

$("#content").find(".form-group").each(function(){
    var html = $(this).attr('class', 'form-group')[0].outerHTML;
    alert(html);
});

问题是，它仍然有我试图删除的所有类。它不在我的fiddle中当我在你的fiddle中检查输出的源时，我发现，是的，我克隆了元素，所以它不会影响DOM，这不是你想要的吗。如果你只想删除DOM中的类，这很简单，你不需要任何这些->问题是，它仍然有我试图删除的所有类。它不在我的fiddle中。当我检查你的fiddle中的输出源时，我发现，是的，我克隆了元素，所以它不会影响DOM，这不是你想要的吗。如果您只想删除DOM中的类，那么它很简单，并且您不需要任何这些->这将只获得一个.form组块。如果我有多个街区会怎么样？它会给你第一个街区。如果您需要第二个，您可以将
[0]
更改为
[1]
等等。如果我不知道有多少，会发生什么？此外，它似乎没有在类close时删除div。我将更新代码以删除
.close
div，但您是在更改元素还是只是在复制html？仅复制htmlThis将只获得一个.form组块。如果我有多个街区会怎么样？它会给你第一个街区。如果您需要第二个，您可以将
[0]
更改为
[1]
等等。如果我不知道有多少，会发生什么？另外，它似乎没有在类close时删除div。我将更新代码以删除
.close
div，但是您是在更改元素还是只是在复制html？只是在复制html