从 div 元素中删除 &nbsp 元素

Question

我正在尝试研究一个删除   的逻辑。元素（如果它存在于 div 元素中）。我尝试了替换   的逻辑元素如下：

(div.html().replace(/^\s* /m, ''));

但我要处理的场景的问题是，我想删除仅存在于元素的直接子级的 &nbsp 元素，即假设我们有以下 html 内容：

<div class="block">
  <table>
    <tr>
      <td>
       &nbsp; 1 
      </td>
    </tr>
    <tr>
      <td>
        2
      </td>
    </tr>
  </table>
  &nbsp;
</div>

将类名 block 的 div 元素视为我们要采用的父元素。在这里，我只想查看该元素的子元素，而不是那些子元素中的子元素，这意味着   inside 元素不应该被纳入图片，只有  最后（在桌子结束后）是我想要删除的。谁能想到解决这个问题的办法？

谢谢

Answer 1

测试div的每个子节点，去掉nodeName为'#text'的节点，checking the nodeValue for the character code的结果为真。

const div = document.querySelector('.block');
const regex = /(\u00a0).+/;

function remove(div) {
  const nodes = div.childNodes;
  console.log(`Current nodes: ${nodes.length}`);
  nodes.forEach(node => {
    if (node.nodeName === '#text') {
      if (regex.test(node.nodeValue)) {
        div.removeChild(node);
      }
    }
  });
  console.log(`Remaining nodes: ${nodes.length}`);
}

remove(div);

<div class="block">
  <table>
    <tr>
      <td>
       &nbsp; 1 
      </td>
    </tr>
    <tr>
      <td>
        2
      </td>
    </tr>
  </table>
  &nbsp;
  &nbsp;table
</div>