CODEWITHSUNDEEP
javascriptjquery
katie hudson
katie hudson

Reputation: 2893

Javascript/JQuery removing data from string

I am trying to understand something. I get a string of html code by doing the following

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

If I output formDataUnformatted I get something like the following

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

Now with the above, I need to remove some classes, and get rid of a div. I essentially need to turn it into the following

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

To do this, I do the following

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

Now this pretty much does everything I need it to do, but there is one thing I do not understand. If I output cleanFormData, I get the following

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

Now this is perfect, apart from where it adds -handle to form-group. I do not want form-group-handle, I just want it to be form-group.

Where is it getting this -handle from?

Thanks

Upvotes: 0

Views: 43

Answers (4)

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23379

If you want to change the original element..

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

  alert(html);

https://jsfiddle.net/uanLqtkm/2/

To remove the .close div as well just put this line above the other one.

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

If you want to just get the modified html without changing the original..

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

https://jsfiddle.net/uanLqtkm/3/

If you want to change all of them you can do something like this:

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

Upvotes: 1

Jonathan Lam
Jonathan Lam

Reputation: 17351

It is getting it from ui-draggable-handle. Change your replace() to match the whole thing, not ui-draggable.

Also, it is not advisable to use regular expressions to manipulate HTML.

Upvotes: 1

Cameron
Cameron

Reputation: 434

Change replace(/ ui-draggable-handle| ui-draggable| element/gi, "") to replace(/ ui-draggable| element/gi, "").

Upvotes: 1

adeneo
adeneo

Reputation: 318212

Don't parse HTML with regular expressions, work with DOM nodes instead

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

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

var html = formDataUnformatted.html();

FIDDLE

Upvotes: 2

Related Questions