How to remove a certain space in Javascript but not all spaces

Question

I'm trying to remove a few characters along with a white space. The string is like this:

<table id="myTable"><br/> <tbody><br/> <tr><br/> <td>1</td><br/> <td>1</td><br/> </tr><br/> <tr><br/> <td>1</td><br/> <td>1</td><br/> </tr><br/> <tr><br/> <td>1</td><br/> <td>1</td><br/> </tr><br/> <tr><br/> <td>2</td><br/> <td>2</td><br/> </tr><br/> <tr><br/> <td>2</td><br/> <td>2</td><br/> </tr><br/> <tr><br/> <td>2</td><br/> <td>2</td><br/> </tr><br/> <tr><br/> <td>3</td><br/> <td>3</td><br/> </tr><br/> <tr><br/> <td>3</td><br/> <td>3</td><br/> </tr><br/> <tr><br/> <td>3</td><br/> <td>3</td><br/> </tr><br/> </tbody> <br/></table>

I want to remove only the <br/> and the space after it. Then split it line-by-line with this code, since its an HTML table element.

var table = document.getElementById("myTable").outerHTML
var linebyline = table2.match(/[^\r\n]+/g);

And then with the for loop

var oneline = "", i = 0
for (lines in linebyline ){
    oneline += linebyline [lines].replace(/<br\/>\s/g,"")
}

I was expecting the removal of the <br/> and the white space but the output of oneline was :

<table id="myTable"> <tbody> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> </tr> <tr> <td>2</td> <td>2</td> </tr> <tr> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> </tr> <tr> <td>3</td> <td>3</td> </tr> <tr> <td>3</td> <td>3</td> </tr> </tbody> </table> 

The white space still exists. How to remove all the substrings with <br/> and the space after it?

Answer 1

Here is an approach using DOM manipulation:

 const table = document.querySelector("#myTable"); Array.from(table.querySelectorAll("br")).forEach(br => br.remove()) let n; const textNodes = []; const walk = document.createTreeWalker(table, NodeFilter.SHOW_TEXT, null, false); while (n = walk.nextNode()) { textNodes.push(n); } textNodes.forEach(n => { if (!n.textContent.trim().length) { n.remove() } }) console.log(table.outerHTML) 

 <table id="myTable"><br/> <tbody><br/> <tr><br/> <td>1</td><br/> <td>1</td><br/> </tr><br/> <tr><br/> <td>1</td><br/> <td>1</td><br/> </tr><br/> <tr><br/> <td>1</td><br/> <td>1</td><br/> </tr><br/> <tr><br/> <td>2</td><br/> <td>2</td><br/> </tr><br/> <tr><br/> <td>2</td><br/> <td>2</td><br/> </tr><br/> <tr><br/> <td>2</td><br/> <td>2</td><br/> </tr><br/> <tr><br/> <td>3</td><br/> <td>3</td><br/> </tr><br/> <tr><br/> <td>3</td><br/> <td>3</td><br/> </tr><br/> <tr><br/> <td>3</td><br/> <td>3</td><br/> </tr><br/> </tbody> <br/></table> 

It seems the browser removes the <br /> elements itself, at least Chrome does.

If instead of the <table> element being in the DOM you have just a string, you could still use this solution by parsing the string with a DOMParser

Answer 2

You need a quantifier (eg + or * ):

 let html = `<table id="myTable"><br/> <tbody><br/> <tr><br/> <td>1</td><br/> <td>1</td><br/> </tr><br/> <tr><br/> <td>1</td><br/> <td>1</td><br/> </tr><br/> <tr><br/> <td>1</td><br/> <td>1</td><br/> </tr><br/> <tr><br/> <td>2</td><br/> <td>2</td><br/> </tr><br/> <tr><br/> <td>2</td><br/> <td>2</td><br/> </tr><br/> <tr><br/> <td>2</td><br/> <td>2</td><br/> </tr><br/> <tr><br/> <td>3</td><br/> <td>3</td><br/> </tr><br/> <tr><br/> <td>3</td><br/> <td>3</td><br/> </tr><br/> <tr><br/> <td>3</td><br/> <td>3</td><br/> </tr><br/> </tbody> <br/></table>` html = html.replace(/<br\\/>\\s*/g, "") console.log(html)