如何在忽略 html 标签的同时用 &nbsp 替换所有空白 space

Question

我将 div 元素中的所有 space 替换为这样我就可以使用 JavaScript 文件轻松读取所有 space。当我对此进行编码时，我意识到 div 中的元素会变得混乱，因为像 ids 这样的属性需要标签名称之间的 spaces，而属性将被替换以破坏标签。我怎么能忽略标签和名称之间的 space 而只替换文本 spaces.

代码：

let el = document.getElementById('parent');

function replaceText() {
  let text = el.innerHTML.split(' ').join('&nbsp;');
  el.innerHTML = text;
  console.log(text);
}
//I dont want the span tag or em tag to get messed up by this

<!DOCTYPE html>
<html>
  <body>
    <div id='parent'>
      Lorem ipsum 
      <span id='element'>
        <em id='child'>dolor sit amet</em>
      </span>
    </div>
    <button onclick='replaceText()'>Change with nbsp</button>
   </body>
</html>

Answer 1

我能想到的最好的方法是在元素中查找文本节点。您需要递归调用该函数，直到没有更多文本节点为止。下面是一些帮助您入门的示例代码。

function replaceText(element) {
    for (let childNode of element.childNodes) {
        if (childNode.nodeType === Node.TEXT_NODE) {
            childNode.data = ' ' +  childNode.data.trim().replace(/ /g, '\u00a0') + ' '
            continue
        }

        // Recursively replace text for child node
        replaceText(childNode)
    }
}

<!DOCTYPE html>
<html>
  <body>
    <div id='parent'>
      Lorem ipsum 
      <span id='element'>
        <em id='child'>dolor sit amet</em>
      </span>
    </div>
    <button onclick='replaceText(document.getElementById("parent"))'>Change with nbsp</button>
   </body>
</html>

如何在忽略 html 标签的同时用 &nbsp 替换所有空白 space

How to replace all blank space with &nbsp while ignoring html tags

html

javascript

string

replace