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

Question

我正在尝试理解一些事情。我通过执行以下操作获得一串 html 代码

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

如果我输出 formDataUnformatted 我会得到类似以下内容

<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。我基本上需要将其变成以下内容

<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, "");

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

<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>

现在这已经很完美了，除了在 form-group 中添加了 -handle 之外。我不需要 form-group-handle，我只想它是 form-group。

它从哪里获取这个句柄？

谢谢

Answer 1

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

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

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

var html = formDataUnformatted.html();

FIDDLE