CODEWITHSUNDEEP
javascriptjqueryhtmlregex
DIM3NSION
DIM3NSION

Reputation: 1761

Replacing a number found on multiple instances in div element with another number

As you can see, my HTML contains multiple references to '0'. I need to change these to '1'.

However, my jQuery isn't working.

jQuery(".create-new-location").click(function() {
 jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="header-logo" class="header-title location-header-0 title-edit-header" data-row-id="location-header-0" title="Location name (for your reference)">
        <div class="input-selection title-edit-header">
          <div class="text-input">
              <input class="option_textbox col-sm-12 change-width title-edit" placeholder="Location name (for your reference)" value="" type="text" name="bp_theme_options[social][map][locations][0][location_name]">
          </div>
        </div>
        <div class="open-block pencil-edit" data-row-id="location-header-0"></div>
    </div>

Upvotes: 2

Views: 83

Answers (4)

Travis J
Travis J

Reputation: 82297

Regexing the html is never a good idea.

As you can see, my HTML contains multiple references to '0'. I need to change these to '1'.

The approach you used, and even the accepted answer here, will not modify the containing div with id="header-logo" which contains several of these references. Moreover, there are significant issues with simply replacing existing dom elements with freshly regexed ones in validation cases (as in, this may break your validation).

The approach you should use is to specifically target the attributes that contain these references, and then only modify those. Here is a general approach which looks in all attributes and modifies the occurrence of [0 (0 being the value of before) into [1 (1 being the value of after) as well as modifying the occurrence of -0 (before = 0) to -1 (after =1).

This will prevent removing any existing event handlers from the elements, as well as a number of other issues associated with regexing straight html and then replacing the dom element with the that result.

$.fn.indexUpdate = function(before,after){
 $("*",this).add(this).each(function(){
  $(this.attributes).each(function(){
      this.value = this.value.replace(new RegExp('\\b\\-'+before+'\\b','g'), '-'+after);
      this.value = this.value.replace(new RegExp('\\['+before, 'g'), '['+after);
  });
 });
};

$("#header-logo").indexUpdate(0,1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header-logo" class="header-title location-header-0 title-edit-header" data-row-id="location-header-0" title="Location name (for your reference)">
    <div class="input-selection title-edit-header">
      <div class="text-input">
          <input class="option_textbox col-sm-12 change-width title-edit" placeholder="Location name (for your reference)" value="" type="text" name="bp_theme_options[social][map][locations][0][location_name]">
      </div>
    </div>
    <div class="open-block pencil-edit" data-row-id="location-header-0"></div>
</div>

Upvotes: 1

Munim Munna
Munim Munna

Reputation: 17556

You have to set the html like this

jQuery(".create-new-location").click(function() {
    var the_html = jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']');
    jQuery("#header-logo").html(the_html);
});

But this is not a good practice!!

When you need to change only the attribute of an <input>, why change the whole #header-logo, right? When you re-draw html like this, you risk losing event-handlers binded to the elements you have just re-drawn.

jQuery(".create-new-location").click(function() {
    var elements = jQuery("#header-logo").find('input[name]'); /*all input with name*/
    elements.each(function(el){
        var the_name = el.attr('name').replace(/\[0\]/g, '['+(1)+']');
        el.attr('name', the_name);
    });
});

Upvotes: 2

Nitin Kumar
Nitin Kumar

Reputation: 1

Try this:It will replace all existence of '0' with '##'

$(".create-new-location").click(function() {
   $("#header-logo").html().replace(/0/gi, '##')
});

Upvotes: 0

Harun Diluka Heshan
Harun Diluka Heshan

Reputation: 1256

This statement jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']'); retrieve the html inside the element that have id as header-logo and replace every 0 inside the html string with 1 But it doesn't assign the modified string again to the element So you may want to use following code.

jQuery("#header-logo").html(jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']'));

Upvotes: 0

Related Questions