How to replace a character in a class echoed from DB using javascript

Question

I have this table that I echoed in a page I'm making, and in the output is a series of products separated by a comma (,)

Here is the code for the column:

<td class='listord'>" . $row["OrderList"] . "</td>

here is a sample ouput:

PRODUCT1,PRODUCT2,PRODUCT3

expected output:

PRODUCT1
PRODUCT2
PRODUCT3

This is my current code but it doesn't seem to work:

    let str = document.getElementsByClass("listord");
    for (var i = 0; i < str.length; i++) {
        let result = str[i].innerText.replace(/,/g, "<br>");
        str[i].innerText = result;
    }

What am I doing wrong?

Why not `explode()` by `,` in your PHP script? Or better yet, normalize your data and don't store comma-separated data — brombeer, Sep 22 '22 at 07:36
`document.getElementsByClass` is not a thing. `document.getElementsByClassName` is. — CBroe, Sep 22 '22 at 07:44
Agreed, while the problem presented is a simple string manipulation issue, at the root this scenario is the result of a database design flaw, essentially. Please read [Is storing a delimited list in a database column really that bad?](https://stackoverflow.com/questions/3653462/is-storing-a-delimited-list-in-a-database-column-really-that-bad) — ADyson, Sep 22 '22 at 07:56
this table is purely for output only, I will definitely try explode() and see to it first before retrying the replace() route. I don't know how to normalize data so I will look into that too. Do you have any recommendations on where I should start? I might have gone too deep that it's a pain in the ass to change things at this point but I could at least try but I don't know how to do that — awhooo, Sep 22 '22 at 09:40
There are lots of tutorials and courses you can take (and books you can read) which explain the core principles of relational database design and normalisation. We don't do specific recommendations for off-site resources on stackoverflow, but some simple searching should lead you to plenty of information. In the meantime, I believe my answer below solves your immediate problem, so please take a look and accept it if it helps. Thanks. — ADyson, Sep 22 '22 at 09:52

score 0 · Accepted Answer · answered Sep 22 '22 at 08:13

As CBroe says in the comments, the JS doesn't work primarily because getElementsByClass isn't a real function, not because there's anything wrong with the regular expression in your replace call.

Always check your browser's Console (in its Developer Tools) for errors when working with JavaScript, because this would have shown up there - e.g. in Chrome you'd get the following message:

Uncaught TypeError: document.getElementsByClass is not a function

Also, always check documentation to remind yourself of the exact name.

Another problem you'll have is that since you're trying to replace the comma with a HTML tag, and are expecting the browser to parse that and show the text on separate lines, you need to use innerHTML instead of innerText, otherwise your replacement will be interpreted as plain text instead of live HTML.

Demo:

let str = document.getElementsByClassName("listord");
for (var i = 0; i < str.length; i++) {
  let result = str[i].innerHTML.replace(/,/g, "<br/>");
  str[i].innerHTML = result;
}

<table>
  <tr>
    <td class='listord'>PRODUCT1,PRODUCT2,PRODUCT3</td>
  </tr>
</table>

N.B. As I and others have said in the comments though, a properly normalised database design would not involve storing multiple data items in a single column in comma-separated format to begin with.

How to replace a character in a class echoed from DB using javascript

1 Answers1