Repeating Javascript String replace() method?

Question

I'm importing data from a csv file to HTML, under the location column there will be a serious of numbers, and those numbers might be "bob's place".

var str = document.getElementById("employee_table").innerHTML;
var res = str.replaceAll("1029434329172", "Bob's place");
document.getElementById("employee_table").innerHTML = res;
var str = document.getElementById("employee_table").innerHTML;
var res = str.replaceAll("1032110505696", "Alan's place");
document.getElementById("employee_table").innerHTML = res;
var str = document.getElementById("employee_table").innerHTML;
var res = str.replaceAll("1024004680659", "Sally's place");
document.getElementById("employee_table").innerHTML = res;
var str = document.getElementById("employee_table").innerHTML;
var res = str.replaceAll("1028194015914", "Gilbert's place");
document.getElementById("employee_table").innerHTML = res;

So it does work, is that as efficent as it get's? Can the same thing be done with less lines?

Does this answer your question? [Replace multiple strings with multiple other strings](https://stackoverflow.com/questions/15604140/replace-multiple-strings-with-multiple-other-strings) — ggorlen, Mar 02 '21 at 19:10
Where is that html coming from, is it from a database query populated server, or client, side? What html are you working with? Please post your “*[mcve]*” code so we can reproduce your problem. I would definitely argue that your current approach is unlikely to be the most efficient. — David Thomas, Mar 02 '21 at 19:10
Welcome to SO! Efficient and fewer lines are different metrics. What "efficient" are we talking about here? — ggorlen, Mar 02 '21 at 19:11

score 1 · Answer 1 · answered Mar 02 '21 at 19:12

You're making a search for the id employee_table every time you add or read from it. It's a better solution to temporarily store the content of employee_table in a variable and write to it in the end.

var element = document.getElementById("employee_table");
var str = element.innerHTML;
str = str.replaceAll("1029434329172", "Bob's place");
str = str.replaceAll("1032110505696", "Alan's place");
str = str.replaceAll("1024004680659", "Sally's place");
str = str.replaceAll("1028194015914", "Gilbert's place");
element.innerHTML = str;

score 1 · Answer 2 · answered Mar 02 '21 at 19:18

you can also use multiple replaces stringing together

var str = document.getElementById("employee_table").innerHTML;

str = str.replaceAll("1029434329172", "Bob's place")
         .replaceAll("1032110505696", "Alan's place")
         .replaceAll("1024004680659", "Sally's place")
         .replaceAll("1028194015914", "Gilbert's place");

document.getElementById("employee_table").innerHTML = str;

score 1 · Accepted Answer · answered Mar 02 '21 at 19:47

An idea would be to have a dictionary of places which associate a user ID with a place and to use it in a replace callback

const userPlaces = {
    "1029434329172": "Bob's place",
    "1032110505696": "Alan's place",
    "1024004680659": "Sally's place",
    "1028194015914": "Gilbert's place",
};

const replaceMap = (map, text) => {
    const keys = Object.keys(map);
    const reg = new RegExp(keys.join("|"), "g");
    return text.replace(reg, match => map[match]);
}

const employeeTable = document.getElementById("employee_table");
employeeTable.innerHTML = replaceMap(userPlaces, employeeTable.innerHTML);

Be mindful that this is a quick and dirty implementation: if for example you have a string of numbers which is not a user ID but matches even partially a user ID, replaceMap will replace it.

In any case I think it's important to keep concerns separate: Here you have your data in one place, a function which manipulates a string in second place and DOM manipulation in a third place. You had everything mixed up in your code, it doesn't scale well.

Repeating Javascript String replace() method?

3 Answers3