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

Question

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>

Replacing this way, you will end up replacing many things you dont want — Munim Munna, Feb 21 '18 at 16:59
Replace does not automatically update the source. You have to store the result back into where it should go. — Taplar, Feb 21 '18 at 16:59
the reason for escaping the square brackets is because DIMENSION wants to capture the literal string of `[0]` not `0` or atleast thats what i THINK DIMENSION is wanting to do. — Francis Leigh, Feb 21 '18 at 16:59
@FrancisLeigh yeah I was thinking they wanted to target the 0 in their data-row-id. Then I scrolled the box right and saw the [0] — Taplar, Feb 21 '18 at 17:00
@Taplar yeah that was my initial thought. Maybe a clearer/clean code example would be better from the get go. — Francis Leigh, Feb 21 '18 at 17:01
By passing your re-formatted string INTO the parenthesis of `.html(...)` the method will SET the HTML content to whatever you pass... see docs http://api.jquery.com/html/ — Francis Leigh, Feb 21 '18 at 17:03
Thanks for your feedback guys, sorry for the clarification. I actually wanted to change all instances of 0 not just ones found in [0] — DIM3NSION, Feb 21 '18 at 17:14
Possible duplicate: https://stackoverflow.com/q/1732348/1026459 — Travis J, Feb 21 '18 at 18:37

Munim Munna · Accepted Answer · 2018-02-21T19:18:28.440

2

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);
    });
});

edited Feb 21 '18 at 19:18

answered Feb 21 '18 at 17:01

Munim Munna

17,178
6
29
58

Scary. Why not just modify the attribute values instead of hammering on the dom elements? – Travis J Feb 21 '18 at 18:36
Added suggestion to answer – Munim Munna Feb 21 '18 at 19:21

Travis J · Answer 2 · 2018-02-21T20:48:29.760

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>

score 0 · Answer 3 · answered Feb 21 '18 at 17:09

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)+']'));

score 0 · Answer 4 · answered Feb 21 '18 at 17:28

0

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

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

answered Feb 21 '18 at 17:28

Nitin Kumar

1
1

Why would you bother doing what OP wants except changing the result to a randomly different output? – TylerH Feb 21 '18 at 18:18

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

4 Answers4