Dom 解析在 IE11 中的 React App 上无法正常工作

问：

我非常厌倦了烧焦导致我的应用程序在 IE11 中无法正常工作的隐藏老鼠。我的 react App 在除 IE11 之外的所有浏览器中都能正常工作。IE11 支持是必不可少的。我从服务器获取数据，并在 ModalBar 中将其显示给用户。当我从订单表中选择订单并单击打印发票时，会出现模态栏，所有占位符都将用获得的数据填充。

这是在 Chrome 中：

现在这是在 IE11 中：

从服务器获取的数据：

我发现占位符不是作为对象出现的，也不是作为对象数组正确填充的，而是“操作”和“细节”占位符不是。操作和细节以对象数组的形式出现，我使用 DOMParser 来处理它们。代码如下：

prepareDocumentContent(document, documentData) {
let content = document.body;
console.log(88888888880, content);
if (isObject(documentData)) {
  const placeholders = document.placeholders.split(',').map(item => item.trim());
  let parsedArrays = [];
  for(let k = 0; k < placeholders.length; k++) {
    const placeholder = placeholders[k];
    const isObjectValue = placeholder.includes('.');
    if (isObjectValue) {
      const objectName = placeholder.split('.')[0];
      if (documentData[objectName] instanceof Array) {
        if (parsedArrays.indexOf(objectName) < 0) {
          parsedArrays = [
            ...parsedArrays,
            objectName
          ];
          const parser = new DOMParser();
          const doc = parser.parseFromString(content, 'text/html');
          const elements = doc.getElementsByClassName(objectName);
          for (let ei = 0; ei < elements.length; ei++) {
            const element = elements.item(ei);
            let replace = '';
            const arr = documentData[objectName];
            for (let i = 0; i < arr.length; i++) {
              let newElement = element.outerHTML;
              console.log('newElement', newElement);
              const item = arr[i];
              const names = Object.keys(item);
              for (let j = 0; j < names.length; j++) {
                const itemName = names[j];
                const regex = new RegExp(`{${objectName}` + '.' + `${itemName}}`, 'g');
                const replacing = typeof item[itemName] === 'undefined'
                  ? (!this.props.isIgnoreNotSpecified ? i18n.t('ModalWysiwygBar.not_specified') : '')
                  : item[itemName];
                console.log('replacing', replacing);
                newElement = newElement.replace(
                  regex,
                  replacing
                );
              }
              replace = replace + newElement;
              console.log('replace', replace);
            }
            content = content.replace(element.outerHTML, replace);
            console.log('contentObtained', content);
          }
        }
      } else {
        const regex = new RegExp(`{${placeholder}}`, 'g');
        const objectNotExists = typeof documentData[objectName] === 'undefined' || typeof documentData[objectName][placeholder.split('.')[1]] === 'undefined';
        const replacing = objectNotExists? (!this.props.isIgnoreNotSpecified ? i18n.t('ModalWysiwygBar.not_specified') : '' )
          : documentData[objectName][placeholder.split('.')[1]];
        content = content.replace(
          regex,
          replacing
        );
      }
    } else {
      const regex = new RegExp(`{${placeholder}}`, 'g');
      const replacing = !documentData[placeholder]
        ? (!this.props.isIgnoreNotSpecified ? i18n.t('ModalWysiwygBar.not_specified') : '')
        : documentData[placeholder];
      content = content.replace(
        regex,
        replacing
      );
    }
  }
} else {
  content = documentData.replace(/\n/g, '<br />');
}
const placeholders = document.placeholders.split(',');
placeholders.map(placeholder => {
  const regex = new RegExp(`{${placeholder}}`, 'g');
  const replacing = !this.props.isIgnoreNotSpecified ? i18n.t('ModalWysiwygBar.not_specified') : '';
  content = content.replace(
    regex,
    replacing
  );
});
return content;
}

我认为问题出在这个代码部分：

if (documentData[objectName] instanceof Array) {
        if (parsedArrays.indexOf(objectName) < 0) {
          parsedArrays = [
            ...parsedArrays,
            objectName
          ];
          const parser = new DOMParser();
          const doc = parser.parseFromString(content, 'text/html');
          const elements = doc.getElementsByClassName(objectName);
          for (let ei = 0; ei < elements.length; ei++) {
            const element = elements.item(ei);
            let replace = '';
            const arr = documentData[objectName];
            for (let i = 0; i < arr.length; i++) {
              let newElement = element.outerHTML;
              console.log('newElement', newElement);
              const item = arr[i];
              const names = Object.keys(item);
              for (let j = 0; j < names.length; j++) {
                const itemName = names[j];
                const regex = new RegExp(`{${objectName}` + '.' + `${itemName}}`, 'g');
                const replacing = typeof item[itemName] === 'undefined'
                  ? (!this.props.isIgnoreNotSpecified ? i18n.t('ModalWysiwygBar.not_specified') : '')
                  : item[itemName];
                console.log('replacing', replacing);
                newElement = newElement.replace(
                  regex,
                  replacing
                );
              }
              replace = replace + newElement;
              console.log('replace', replace);
            }
            content = content.replace(element.outerHTML, replace);
            console.log('contentObtained', content);
          }
        }
      }

此函数中的其他代码部分可以正确地工作。我检查了 IE11 中的控制台日志，似乎该函数开始正常工作，但从输出中我得到了缩短的 html 字符串。并且资源管理器不会显示鼠标悬停时字符串是否缩短。没什么可以理解的。我连接了 chrome 和 IE 的屏幕。

Chrome，一切正常：

IE11，简单缩短字符串：

为什么 IE11 不像其他浏览器那样显示完整字符串？从另一个角度来看，如果 IE11 没有正确形成 html 字符串，那么 html 将被破坏，modalBar 中不会显示任何数据。但是，除了一些未填充的占位符外，所有表都显示所有限制。我认为这意味着 IE11 正确表单 html 字符串，但只是没有在其控制台中显示完整字符串。但是为什么？和 IE11 开始正确填充操作和详细信息，但最终，它再次在模态窗口中显示缩短的字符串和可悲的结果。

如何克服IE11中的问题？老鼠在哪里？提前感谢您的帮助