java script replace for html attributes

Question

I have a html tag like the following:

            <div id="slide1" class="mySlides" type="slide" index="1" duration="1100" style="display: block;">
                <div id="page_number1" class="numbertext">1/2</div>
                <div id="slide_content1"><p>First Slide</p>
</div>
                <div id="slide_h1" class="slide_h1"></div>
                <div id="slide_h2" class="slide_h2"></div>
                <div id="playOptions{slide_number}" class="playOptions">|
                    <span id="remaining_slide_time{slide_number}"></span> |
                    <span id="remaining_time{slide_number}"></span>
                </div>
            </div>
        </div>

I need to replace {slide_number} with an integer. Whatever I tried the result doesn't replace the {slide_number}

var str = template.replace("{slide_number}", i);

Possibly a xy problem since using a class what be much easier, very sure bad programming because you [don't parse html with regex](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) (and replaceAll doesn't exist) — baao, Sep 15 '19 at 11:52
I already said: use a class instead. Apart from that, it's impossible to say; there's not enough code — baao, Sep 15 '19 at 11:58
https://stackoverflow.com/questions/1144783/how-to-replace-all-occurrences-of-a-string — rprakash, Sep 15 '19 at 12:01

score 0 · Answer 1 · answered Sep 15 '19 at 12:00

You can use attribute selector contains that will select all elements where id contains {slide_number} and you can replace that part of the id with the number.

document.querySelectorAll("[id*='{slide_number}']").forEach(function(e) {
  e.id = e.id.replace("{slide_number}", 1)
})

<div id="slide1" class="mySlides" type="slide" index="1" duration="1100" style="display: block;">
  <div id="page_number1" class="numbertext">1/2</div>
  <div id="slide_content1">
    <p>First Slide</p>
  </div>
  <div id="slide_h1" class="slide_h1"></div>
  <div id="slide_h2" class="slide_h2"></div>
  <div id="playOptions{slide_number}" class="playOptions">|
    <span id="remaining_slide_time{slide_number}"></span> |
    <span id="remaining_time{slide_number}"></span>
  </div>
</div>

score 0 · Answer 2 · answered Sep 15 '19 at 12:07

0

in javascript you can find them from

document.querySelector('[id$="{slide_number}"]').id; and document.querySelector('[id*="{slide_number}"]').id;

Please read this

answered Sep 15 '19 at 12:07

Reza Yousefi

148
11

score -1 · Answer 3 · answered Sep 15 '19 at 12:09

If you use jquery then it can be done like below:

$('#playOptions').attr('id','playOptions88');

But I recommend you to use HTML data attribute to distinguish different element. It is a very nice thing to work with multiple elements that can be needed to change dynamically.

If you change your ID attribute dynamically adding some integer number then it may be harder to catch them. Instead, use data like below code.

You can make any element unique setting the data-SOMETHING.

If you write the code below:

$('#playOptions').data('roll','100');

Then the element will be

<div id="playOptions" data-roll="100" class="playOptions">

If you write the code below:

$('#playOptions').data('name','ahmad');

Then the element will be

<div id="playOptions" data-name="ahmad" class="playOptions">

You can then catch the element by the code below:

var name =  $('#playOptions').data('name');
console.log(name) //Output should be 'ahmad'

Similarly,

var roll = $('#playOptions').data('roll');
console.log(roll) //Output should be '100'

To learn more about the data attribute please see the link https://api.jquery.com/data/

score -1 · Answer 4 · answered Sep 15 '19 at 12:09

-1

This solution worked:

   var find = '{slide_number}';
    var re = new RegExp(find, 'g');
    str = template.replace(re, i);

answered Sep 15 '19 at 12:09

Ahmad

8,811
11
76
141

java script replace for html attributes

4 Answers4