Replace specific content in line in html with JS

Question

I've got a html file and JS file

So I've got a syntax of svg in my html file :

Currently, I've got only this in my link.js:

let listTickets = new Map([
                          ['0', '{home/sensors/temp/kitchen}'],
                          ['1', '{home/sensors/temp/bathroom}'],
                          ['2',  '{home/sensors/temp/room}']
]);

let listNumber = new Map([
                          ['0', '24'],
                          ['1', '22'],
                          ['2', '25']
]);

// var topicMatch = line.match(/\{[\w\/]+\}/g); // think need to use regex

So What I want in my js file, it's when we've got a syntax in html file like:

"{ + content + }

Need to replace (in my navigator and not in file) the same syntax by his value, for example, we are reading the html file :

detect first content : {home/sensors/temp/kitchen} => need to change by '24'
detect second content : {home/sensors/temp/bathroom} => need to change by '22'
detect first content : {home/sensors/temp/kitchen} => need to change by '25'

Thanks for your help

user_12125306 · Answer

You can use this JS code:

var all = document.getElementsByTagName("*");
for (var i = 0, max = all.length; i < max; i++) {
  for (let [key, value] of listTickets) {
    if (all[i].innerHTML.includes(value)) {
      all[i].innerHTML=all[i].innerHTML.replaceAll(value, listNumber.get(key));
    }
  }
}

It finds any match of given strings in the listTickets map in your html, and changes them with the value of listNumber map for string's key.

user_2520800 · Answer

You get more flexibility with a modern Web Component (supported in all modern Browsers)

And process your source SVG as a Template Literal String to replace values (or execute functions like: color does)

Replace specific content in line in html with JS

2 Answers