Как удалить определенный пробел в Javascript, но не все пробелы

Question

Я пытаюсь удалить несколько символов вместе с пробелом.Строка выглядит так:

<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>

Я хочу удалить только <br/> и пробел после него.Затем разделите его построчно с этим кодом, так как это элемент HTML table.

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

А затем с циклом for

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

Я ожидал удаления <br/> и пробела, но на выходе oneline было:

<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> 

Пустое пространство все еще существует.Как удалить все подстроки с <br/> и пробел после нее?

Answer 1

Вот подход, использующий манипулирование DOM:

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>

Кажется, что браузер удаляет элементы <br /> сам, по крайней мере, это делает Chrome.

Если вместо элемента <table>в DOM у вас есть только строка, вы все равно можете использовать это решение, проанализировав строку с DOMParser

Answer 2

Вам нужен квантификатор (например, + или *):

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)