JavaScript to trim whitespace from the innerHtml for all elements in a html string - Stack Overflow

admin管理员组

文章数量:1313146

I have a string as follows:

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

I need to loop through each element and trim the whitespace and any leading or trailing   entities using JavaScript so that the end result is as follows:

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

To provide more background, this is a string that is being pasted into a WYSIWYG editor. So I am simply attempting to clean up the string as it is being pasted. I'm not great with JavaScript, but even if I were to use the method suggested in the Javascript: How to loop through ALL DOM elements on a page? post, I am uncertain as to how to utilise document.getElementsByTagName("*"); in a string.

UPDATE Using @Bharata's answer, I was able to achieve the clean up using the following:

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

I have a string as follows:

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

I need to loop through each element and trim the whitespace and any leading or trailing   entities using JavaScript so that the end result is as follows:

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

To provide more background, this is a string that is being pasted into a WYSIWYG editor. So I am simply attempting to clean up the string as it is being pasted. I'm not great with JavaScript, but even if I were to use the method suggested in the Javascript: How to loop through ALL DOM elements on a page? post, I am uncertain as to how to utilise document.getElementsByTagName("*"); in a string.

UPDATE Using @Bharata's answer, I was able to achieve the clean up using the following:

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

• javascript

Share Improve this question Follow edited Sep 18, 2018 at 0:03 Scho asked Sep 16, 2018 at 15:17 SchoScho 37111 gold badge44 silver badges1414 bronze badges 6

• 2 Possible duplicate of Javascript: How to loop through ALL DOM elements on a page? ... once you have done this, you may simply run trim() on the inner HTML of each element. – Tim Biegeleisen Commented Sep 16, 2018 at 15:18
• I'm not looping through all the elements in a page, but a string. – Scho Commented Sep 16, 2018 at 15:31
• 1 What environment are you running in, nodejs? If so that affects how you would do this as you would need (or well should) use a DOM library like jsDOM to parse the string into elements to make it easier in trimming the contents. – Patrick Evans Commented Sep 16, 2018 at 15:39
• is this being done in browser or other environment? – charlietfl Commented Sep 16, 2018 at 15:40
• Sorry for the confusion guys - please see my edit. – Scho Commented Sep 16, 2018 at 16:00

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

you have to get all text nodes and trim content:

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(/^( |\s)*/, '')

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

You can use JS DOM API for this case like follows:

• Add your text to hidden div element
• Replace all spaces in innerHTML content using trim() and replace() functions.

Full example

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 to trim whitespace from the innerHtml for all elements in a html stringStack Overflow