diffEditHTML

diffEditHTML.js

function diffEditHTML(after, oldDOM) {
    const newDOM = document.createElement('div');
    newDOM.innerHTML = after;
    const newChildNodes = [...newDOM.childNodes],
        oldChildNodes = [...oldDOM.childNodes];
    let diffStart = Number.POSITIVE_INFINITY;
    for (let i = 0; i < Math.max(newChildNodes.length, oldChildNodes.length); i++) {
        const newChildDom = newChildNodes[i], oldChildDom = oldChildNodes[i];
        if (!!newChildDom && !!oldChildDom) {
            if ((newChildDom.innerHTML && !oldChildDom.innerHTML) ||
                (!newChildDom.innerHTML && oldChildDom.innerHTML) ||
                newChildDom.innerHTML !== oldChildDom.innerHTML ||
                newChildDom.textContent !== oldChildDom.textContent
            ) {
                diffStart = i;
                break;
            }
        } else {
            diffStart = i;
            break;
        }
    }
    for (let i = diffStart; i < oldChildNodes.length; i++) oldDOM.removeChild(oldChildNodes[i])
    for (let i = diffStart; i < newChildNodes.length; i++) {
        oldDOM.appendChild(newChildNodes[i])
    }
}