JQuery replace elements within string

Question

I have a string that contains HTML data, for example:

<div data-type="date" class="form-group">
    <label class="control-label col-sm-5" for="dateInput">Date Input:</label>
    <div class="col-sm-3">
        <input type="text" name="dateInput[]" class="form-control date_picker" id="dateInput">
    </div>
</div>

<div data-type="date" class="form-group">
    <label class="control-label col-sm-5" for="dateInput">Date Input:</label>
    <div class="col-sm-3">
        <input type="text" name="dateInput[]" class="form-control date_picker" id="dateInput">
    </div>
</div>

I asked this question before presuming I was working with the DOM. However, this is just a string. The first thing I do is to remove the data attribute from the string:

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

Next, you can see that both input elements have an id of dateInput. What I need to do now is to change this value so that it is unique, using something like an incrementing number. So, the first input should have dateInput1 and the second dateInput2.

How can I achieve this? If possible, it would also be good to change the for value in the label to match the id.

Thanks

Update

If I do:

$("#content").find(".form-group").each(function() {
        var html = $(this).attr('class', 'form-group')[0].outerHTML.replace(/ data-(.+)="(.+)"/g, "");
        $(this).find('input[type="text"]').attr('id', this.id+$(this).index()+1);

        dataArray.push(html);
    });

It does not seem to update. I have an example fiddle here https://jsfiddle.net/mLgrfzaL/4/

score 0 · Answer 1 · edited May 23 '17 at 10:27

You can use jQuery for evaluating the string in order to navigate it as DOM tree:

var string = "<div><span>Hello</span></div>";
var $parsedDom = $(string);
$parsedDom.children(); // => <span>Hello</span>

In your case, it is not clear to me where you want to apply it.

Answering your other questions:

$("#content").find(".form-group").each(function(index) {

    //$(this).attr('class', 'form-group') has no effect:
    // you have already found the nodes with this class

   // removing the "data-" (why?)
   $(this).removeAttr("data-type");

   //modifing the id
   var $thisInput = $(this).find('input');
   var oldId = $thisInput.attr('id');
   $thisInput.attr('id', oldId + index);
});

Eventually you can loop on element attribute for removing every attribute starting with "data-".

score 0 · Answer 2 · answered Jan 25 '16 at 14:14

You should cycle each input having id equal to dateInput, then append to its old value index + 1 (since it is zero-based).

$("input[id='dateInput']").each(function(index, value) {
    var old_id = $(value).attr("id");
    var new_id = old_id + (index + 1);
    $(value).attr("id", new_id);
});

score 0 · Answer 3 · answered Jan 25 '16 at 14:22

0

Use .index() to get a unique number in the each loop:

$("#content").find(".form-group").each(function() {
    // other code

     $(this).find('input[type="text"])
                 .attr('id', this.id+$(this).index()+1);

 });

answered Jan 25 '16 at 14:22

Jai

74,255
12
74
103

Thanks. I have made an update showing my issue, and linked to a fiddle – katie hudson Jan 25 '16 at 14:29

JQuery replace elements within string

3 Answers3