Question

我有一个字符串如下：

<div> Here is some text&nbsp;</div>
<div>Here is some text </div>
<ul>
    <li>test 1 </li>
    <li> test 2</li>
    <li>&nbsp;test 3&nbsp;</li>
</ul>
<div> Here is some text </div>

我需要遍历每个元素，并使用JavaScript修剪空白以及任何前导或尾随 实体，以便最终结果如下：

<div>Here is some text</div>
<div>Here is some text</div>
<ul>
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>
</ul>
<div>Here is some text</div>

为提供更多背景信息，这是一个粘贴到WYSIWYG编辑器中的字符串。因此，我只是在尝试清理粘贴的字符串。我对JavaScript不太满意，但是即使我要使用 Javascript：如何在页面上遍历所有DOM元素？文章中建议的方法，我也不确定如何利用document.getElementsByTagName("*");放在字符串中。

更新使用@Bharata的答案，我可以使用以下方法实现清理：

var str = "<div> Here is some text&nbsp;</div>" + 
"<div>Here is some text </div>" + 
"<ul>" + 
"    <li>test 1 </li>" + 
"    <li> test 2</li>" + 
"    <li>&nbsp;test 3&nbsp;</li>" + 
"</ul>" + 
"<div> Here is some text </div>";

var cleanHtml = cleanUp(str);

function cleanUp(content) {
    var dom = document.createElement("div");
    dom.innerHTML = content;
    var elems = dom.getElementsByTagName('*');
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].innerHTML) {
            elems[i].innerHTML = elems[i].innerHTML.trim();
        }
    }
    return dom.innerHTML;
}

Answer 1

您必须获取所有文本节点并修剪内容：

var walker = document.createTreeWalker(
    document.querySelector('#my-div'), 
    NodeFilter.SHOW_TEXT, 
    null, 
    false
);

var node;

while(node = walker.nextNode()) {
    if(!node.previousSibling)
       node.textContent = node.textContent.replace(/^(&nbsp;|\s)*/, '')

    if(!node.nextSibling)
       node.textContent = node.textContent.replace(/(&nbsp;|\s)*$/, '')
}

Answer 2

对于这种情况，您可以使用JS DOM API，如下所示：

将您的文本添加到隐藏的div元素
使用innerHTML和trim()函数替换replace()内容中的所有空格。

完整示例

var str = "<div> Here is some text&nbsp;</div>" + 
"<div>Here is some text </div>" + 
"<ul>" + 
"    <li>test 1 </li>" + 
"    <li> test 2</li>" + 
"    <li>&nbsp;test 3&nbsp;</li>" + 
"</ul>" + 
"<div> Here is some text </div>";

var hiddenDiv = document.querySelector('#hidden-div');
hiddenDiv.innerHTML = str;

var hiddenElems = hiddenDiv.getElementsByTagName('*');

for(var i = 0; i < hiddenElems.length; i++)
{
    if(hiddenElems[i].innerHTML)
    {
        hiddenElems[i].innerHTML = hiddenElems[i].innerHTML.trim().replace(/&nbsp;/g, '');
    }
}

document.write('<pre>' + hiddenDiv.innerHTML + '</pre>');

<div id="hidden-div" style="display:none"></div>

JavaScript修剪HTML字符串中所有元素的innerHtml空格

2 个答案: