I have the following simple contenteditable table cell:

When I press the Test button, it outputs the innerHTML and innerText values inside the box.

innerHTML: (note the 4 <br> tags at the end)

<i style="font-size: 14.6667px;">This</i><span style="font-size: 14.6667px;">&nbsp;is one line</span><br style="font-size: 14.6667px;"><br style="font-size: 14.6667px;"><span style="font-size: 14.6667px;">This is&nbsp;</span><u style="font-size: 14.6667px; font-weight: bold;">another</u><span style="font-size: 14.6667px;">&nbsp;</span><span style="font-size: 14.6667px;">line</span><br style="font-size: 14.6667px;"><br><br><br style="font-size: 14.6667px;">

innerText:

This is one line

This is another line

What I want to achieve: be able to "trim" the innerHTML value (i.e., remove blank lines) while keeping the formatting. This is simple to do with the innerText value (just something like document.getElementById("id").innerText.trim()), but the formatting is gone. I can't see any reference to "trim" an innerHTML value. Is there a way to do this using either Javascript or JQuery?

    function test() {
        var html = document.getElementById("inputBox").innerHTML;
        var text = document.getElementById("inputBox").innerText;
        console.log(`html:\n${html}`);
        console.log(`text:\n${text}`);
    }

table {
  width: 100%;
}

td#inputBox {
  height: 100px;
  border: 1px solid #020202;
}

<table>
    <tr>
        <td contenteditable="true" id="inputBox"></td>
    </tr>
</table>
<button onclick="test()">Test</button>

I have the following simple contenteditable table cell:

When I press the Test button, it outputs the innerHTML and innerText values inside the box.

innerHTML: (note the 4 <br> tags at the end)

<i style="font-size: 14.6667px;">This</i><span style="font-size: 14.6667px;">&nbsp;is one line</span><br style="font-size: 14.6667px;"><br style="font-size: 14.6667px;"><span style="font-size: 14.6667px;">This is&nbsp;</span><u style="font-size: 14.6667px; font-weight: bold;">another</u><span style="font-size: 14.6667px;">&nbsp;</span><span style="font-size: 14.6667px;">line</span><br style="font-size: 14.6667px;"><br><br><br style="font-size: 14.6667px;">

innerText:

This is one line

This is another line

What I want to achieve: be able to "trim" the innerHTML value (i.e., remove blank lines) while keeping the formatting. This is simple to do with the innerText value (just something like document.getElementById("id").innerText.trim()), but the formatting is gone. I can't see any reference to "trim" an innerHTML value. Is there a way to do this using either Javascript or JQuery?

    function test() {
        var html = document.getElementById("inputBox").innerHTML;
        var text = document.getElementById("inputBox").innerText;
        console.log(`html:\n${html}`);
        console.log(`text:\n${text}`);
    }

table {
  width: 100%;
}

td#inputBox {
  height: 100px;
  border: 1px solid #020202;
}

<table>
    <tr>
        <td contenteditable="true" id="inputBox"></td>
    </tr>
</table>
<button onclick="test()">Test</button>

• javascript
• html
• jquery

• Make a Document Fragment, remove <br> elements from the fragment and append the fragment to the contenteditable. – Teemu Commented Feb 17 at 6:35
• @DarkBee updated with MWE – ajthealchemist Commented Feb 17 at 6:47
• You might want to run the HTML through something like npmjs/package/sanitize-html – AKX Commented Feb 17 at 6:53
• i've found the site htmlwasher which does what I want to achieve. however, it doesn't seem to offer an API or downloadable files. – ajthealchemist Commented Feb 17 at 10:25
• you may use DOMPurify by doing something like DOMPurify.sanitize(dirtyHTML, {ALLOWED_TAGS: ['i', 'u'], ALLOWED_ATTR: []}); – Diego D Commented Feb 17 at 11:30

1 Answer 1

You can use DOMParser to loop over the elements and remove what needs to be removed:

function removeTrailingBr(html) {
    const doc = new DOMParser().parseFromString(html, 'text/html');

    let lastChild = doc.body.lastChild;
    while (lastChild?.nodeType === Node.ELEMENT_NODE && lastChild.tagName === "BR") {
        const toRemove = lastChild;
        lastChild = lastChild.previousSibling;
        doc.body.removeChild(toRemove);
    }

    return doc.body.innerHTML;
}

const html = `<i style="font-size: 14.6667px;">This</i><span style="font-size: 14.6667px;">&nbsp;is one line</span><br style="font-size: 14.6667px;"><br style="font-size: 14.6667px;"><span style="font-size: 14.6667px;">This is&nbsp;</span><u style="font-size: 14.6667px; font-weight: bold;">another</u><span style="font-size: 14.6667px;">&nbsp;</span><span style="font-size: 14.6667px;">line</span><br style="font-size: 14.6667px;"><br><br><br style="font-size: 14.6667px;">`;

console.log(removeTrailingBr(html));