element.outer html не работает правильно в IE11 - PullRequest
Новая
       10

element.outer html не работает правильно в IE11

0 голосов
/ 16 марта 2020

Я разрабатываю реагирующее приложение. Я получаю html строку шаблона из бэкэнда, и моя задача состоит в том, чтобы правильно проанализировать ее и правильно отобразить соответствующие данные пользователю во всех браузерах. Все отлично работает во всех браузерах, кроме IE11. Inte rnet 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);
          }
        }
      }
    ...

string replace notnt replace, так как в исходной строке:

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

и element.outer html дает мне это:

"<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 обрезает значение ширины, почему добавляет border-image, заменяет встроенные стили и т.д.? Как преодолеть эту проблему?

...