Я очень устал от поиска скрытой крысы, которая заставляет мое приложение работать некорректно в IE11. Приложение «Мой ответ» работает правильно во всех браузерах, кроме IE11. Поддержка IE11 обязательна. Я получаю данные с сервера и показываю их пользователю в ModalBar. Когда я выбираю заказ из таблицы заказов и нажимаю на печать счета, появляется модальная панель, и все заполнители будут заполнены полученными данными.
это chrome: 
и теперь это в IE11: 
данные, полученные с сервера: 
I Выяснилось, что заполнители, которые идут не как объекты, а не как массивы объектов, заполнены правильно, а заполнители «ops» и «details» нет. Операции и детали представляют собой массив объектов, и я использую 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? где крыса? Заранее спасибо за помощь