Question

我正在开发React应用程序。我从后端收到html模板字符串，我的任务是正确解析它，并在所有浏览器中向用户正确显示适当的数据。除了IE11，其他所有浏览器都可以正常运行。 Internet Explorer本身会添加一些额外的内联样式，并削减某些CSS属性的值。

let content = document.body;
const someRegex = /"/g;
content = content.replace(someRegex, "'");
console.log('Regexed', 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 doc = this.parseHTML(content);
          const elements = doc.querySelectorAll('.' + objectName);
          for (let ei = 0; ei < elements.length; ei++) {
            const element = elements.item(ei); // e.g <tr class = "ops">
            console.log('element', element);
            let replace = '';
            const arr = documentData[objectName];
            for (let i = 0; i < arr.length; i++) {
              let newElement = element.outerHTML.replace(someRegex, "'");
              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];
                newElement = newElement.replace(
                  regex,
                  replacing
                );
              }
              replace = replace + newElement;
            }
            // debugger;
            content = content.replace(element.outerHTML.replace(someRegex, "'"), replace);
          }
        }
      }
    ...

字符串替换不会替换，因为在原始字符串中：

"<td style='font-size: 9px; border: 1px solid; text-align: left; height: 11px; width: 7.1191%;'>{ops.iterator}</td>"

和element.outerhtml给了我这个

"<td style='border: 1px solid currentColor; border-image: none; width: 7.11%; height: 11px; text-align: left; font-size: 9px;'>{ops.iterator}</td>"

IE混乱不堪。我尝试了很多方法。我使用了domparser，我使用了自定义的创建函数，但是没有运气。为什么IE会削减宽度值，为什么要添加边框图像，交换内联样式等？如何克服这个问题？

element.outerhtml在IE11中无法正常工作

0 个答案: