I have been experiencing an issue where DOM text nodes with certain characters behave strangely in IE when using the Node.normalize() function to concatenate adjacent text nodes.

I have created a Codepen example which allows you to reproduce the bug in IE11:

Output in IE11: '- Example'

Output in Chrome and earlier versions of IE: 'Test - Example'

As you can see, this truncates everything prior to the minus symbol which is apparently treated as a delimiting character, apparently due to a bug in the native implementation of normalize() in Internet Explorer 11 (but not IE10, or IE8, or even IE6).

Can anyone explain why this happens, and does anyone know of other sequences of characters which cause this issue?

Edit - I have written a codepen that will test sections of Unicode characters to identify characters that cause this behavior. It appears to affect many more characters than I originally realized:

/ This tests Unicode characters from 32-1000 and prints those that fail the test (truncate data when nodes are normalized) You can modify it to test other ranges of characters, but be careful of increasing the range too much in IE or it will freeze.

I've created an IE bug report and Microsoft reports being able to reproduce it based on the code sample I provided. Vote on it if you're also experiencing this issue:

I have been experiencing an issue where DOM text nodes with certain characters behave strangely in IE when using the Node.normalize() function to concatenate adjacent text nodes.

I have created a Codepen example which allows you to reproduce the bug in IE11: http://codepen.io/anon/pen/BxoKH

Output in IE11: '- Example'

Output in Chrome and earlier versions of IE: 'Test - Example'

As you can see, this truncates everything prior to the minus symbol which is apparently treated as a delimiting character, apparently due to a bug in the native implementation of normalize() in Internet Explorer 11 (but not IE10, or IE8, or even IE6).

Can anyone explain why this happens, and does anyone know of other sequences of characters which cause this issue?

Edit - I have written a codepen that will test sections of Unicode characters to identify characters that cause this behavior. It appears to affect many more characters than I originally realized:

http://codepen.io/anon/pen/Bvgtb/ This tests Unicode characters from 32-1000 and prints those that fail the test (truncate data when nodes are normalized) You can modify it to test other ranges of characters, but be careful of increasing the range too much in IE or it will freeze.

I've created an IE bug report and Microsoft reports being able to reproduce it based on the code sample I provided. Vote on it if you're also experiencing this issue: https://connect.microsoft./IE/feedback/details/832750/ie11-node-normalize-dom-implementation-truncates-data-when-adjacent-text-nodes-contain-a-minus-sign

• javascript
• html
• internet-explorer
• dom

• 1 What version of IE? I get the expected result on both IE8 and IE10, no workaround required. – T.J. Crowder Commented Mar 11, 2014 at 22:03
• Sorry, IE11, am testing now in more browser versions. – JessieArr Commented Mar 11, 2014 at 22:06
• 1 In fact, it even works in IE6 without the workaround: jsbin./xoxenara/1 What bug, exactly? – T.J. Crowder Commented Mar 11, 2014 at 22:06
• 1 Wow, but it fails in IE11. – T.J. Crowder Commented Mar 11, 2014 at 22:09
• 2 There is actually a bug for this...normalize is broken in IE 11 connect.microsoft./IE/feedback/details/809424/… – Dan Commented Mar 13, 2014 at 15:24

5 Answers 5

The other answers here are somewhat verbose and inplete — they do not walk the full DOM sub-tree. Here's a more prehensive solution:

function normalize (node) {
  if (!node) { return; }
  if (node.nodeType == 3) {
    while (node.nextSibling && node.nextSibling.nodeType == 3) {
      node.nodeValue += node.nextSibling.nodeValue;
      node.parentNode.removeChild(node.nextSibling);
    }
  } else {
    normalize(node.firstChild);
  }
  normalize(node.nextSibling);
}

I created a workaround by simply reimplementing the normalize method in JS, but struggled with this for many hours, so I figured I'd make a SO post to help other folks out, and hopefully get more information to help satisfy my curiosity about this bug which wasted most of my day, haha.

Here is a codepen with my workaround which works in all browsers: http://codepen.io/anon/pen/ouFJa

My workaround was based on some useful normalize code I found here: https://stackoverflow./a/20440845/1504529 but has been tailored to this specific IE11 bug rather than the one discussed by that post:

Here's the workaround, which works in all browsers I've tested, including IE11

function isNormalizeBuggy(){
  var testDiv = document.createElement('div');
  testDiv.appendChild(document.createTextNode('0-'));
  testDiv.appendChild(document.createTextNode('2'));
  testDiv.normalize();
  return testDiv.firstChild.length == 2;
}

function safeNormalize(DOMNode) {
  // If the normalize function doesn't have the bug relating to minuses,
  // we use the native normalize function. Otherwise we use our custom one.
  if(!isNormalizeBuggy()){
    el.normalize();
    return;
  }
  function getNextNode(node, ancestor, isOpenTag) {
    if (typeof isOpenTag === 'undefined') {
      isOpenTag = true;
    }
    var next;
    if (isOpenTag) {
      next = node.firstChild;
    }
    next = next || node.nextSibling;
    if (!next && node.parentNode && node.parentNode !== ancestor) {
      return getNextNode(node.parentNode, ancestor, false);
    }
    return next;
  }
  var adjTextNodes = [], nodes, node = el;
  while ((node = getNextNode(node, el))) {
    if (node.nodeType === 3 && node.previousSibling && node.previousSibling.nodeType === 3) {
      if (!nodes) {
        nodes = [node.previousSibling];
      }
      nodes.push(node);
    } else if (nodes) {
      adjTextNodes.push(nodes);
      nodes = null;
    }
  }

  adjTextNodes.forEach(function (nodes) {
    var first;
    nodes.forEach(function (node, i) {
      if (i > 0) {
        first.nodeValue += node.nodeValue;
        node.parentNode.removeChild(node);
      } else {
        first = node;
      }
    });
  });
};

Not the exact answer, but helped in my case.

function safeNormalize(el) {
function recursiveNormalize(elem)
{
    for (var i = 0; i < elem.childNodes.length; i++) {
        if (elem.childNodes[i].nodeType != 3) {
            recursiveNormalize(elem.childNodes[i]);
        }
        else {
            if (elem.childNodes[i].nextSibling != null && elem.childNodes[i].nextSibling.nodeType == 3) {
                elem.childNodes[i].nodeValue = elem.childNodes[i].nodeValue + elem.childNodes[i].nextSibling.nodeValue;
                elem.removeChild(elem.childNodes[i].nextSibling);
                i--;
            }
        }
    }
}
recursiveNormalize(el);
}

The normalise code looks a little convoluted, the following is a bit simpler. It traverses the siblings of the node to be normalised, collecting the text nodes until it hits an element. Then it calls itself and collects that element's text nodes, and so on.

I think seprating the two functions makes for cleaner (and a lot less) code.

// textNode is a DOM text node
function collectTextNodes(textNode) {

  // while there are text siblings, concatenate them into the first   
  while (textNode.nextSibling) {
    var next = textNode.nextSibling;

    if (next.nodeType == 3) {
      textNode.nodeValue += next.nodeValue;
      textNode.parentNode.removeChild(next);

    // Stop if not a text node
    } else {
      return;
    }
  }
}

// element is a DOM element
function normalise(element) {
  var node = element.firstChild;

  // Traverse siblings, call normalise for elements and 
  // collectTextNodes for text nodes   
  while (node) {
    if (node.nodeType == 1) {
      normalise(node);

    } else if (node.nodeType == 3) {
      collectTextNodes(node);
    }
    node = node.nextSibling;
  }
}

function mergeTextNode(elem) {
    var node = elem.firstChild, text
    while (node) {
        var aaa = node.nextSibling
        if (node.nodeType === 3) {
            if (text) {
                text.nodeValue += node.nodeValue
                elem.removeChild(node)
            } else {
                text = node
            }
        } else {
            text = null
        }
        node = aaa
    }
}