Javascript Regex сбой в Edge, но работает во всех других браузерах

Question

У меня есть эта строка, которая в основном и шаблон HTML для упоминания:

<p>lkmlsdkmlskdmflsdk <span class="mention-user" data-initials="AG" data-name="AndréèêÜÄÖß_Güntheräö" id="cxid5024056"><span contenteditable="false"><!----><span class="initials"><!---->AG<!----></span>AndréèêÜÄÖß_Güntheräö<!----><!----></span></span> laksmlaksm lkmalskamlskmaldksml</p>

и я использую эту функцию регулярного выражения для удаления HTML-кода упоминания и изменения идентификатора упоминания, в результате я должен получить обратно эту строку:

<p>lkmlsdkmlskdmflsdk {mentionuser=cxid5024056} laksmlaksm kmalskamlskmaldksml</p>

в результате я получаю это:

<p>asñald,ñsdl, {mentionuser=cxid5024056}" data-initials="AG" data-name="AndréèêÜÄÖß_Güntheräö laksmlaksm kmalskamlskmaldksml</p>

для этого я использую эту функцию для замены упомянутого HTML в формате упомянутого идентификатора:

Заменить функцию упоминания

public replaceMention(text: string): string {
    if (!text) {
      return '';
    }
    const contentMention = text.split(/(cxid[0-9]{1,8})/);
    for (let index = 0; index < contentMention.length; index++) {
      if (contentMention[index].match(/<span[^>]*id="/)) {
        contentMention[index] = contentMention[index].replace(/<span[^>]*id="/, '');
      }
      if (contentMention[index].match(/">[^>]*<span[^>]*><[^>]*>(<img[^>]*>)?(<span[^>]*><[^>]*>[^>]*<[^>]*><\/span>)?([^>]*)?(([a-zA-Z\-_.äöüéèêÜÄÖß etc]+)?\s?[a-zA-Z\-_.äöüéèêÜÄÖß etc]+?_[a-zA-Z\-_.äöüéèêÜÄÖß etc]+)([^>]*)?(<[^>]*><[^>]*>)?<\/span>[^>]*<\/span>(&nbsp;)?/)) {
        contentMention[index] = contentMention[index].replace(
          /">[^>]*<span[^>]*><[^>]*>(<img[^>]*>)?(<span[^>]*><[^>]*>[^>]*<[^>]*><\/span>)?([^>]*)?(([a-zA-Z\-_.äöüéèêÜÄÖß etc]+)?\s?[a-zA-Z\-_.äöüéèêÜÄÖß etc]+?_[a-zA-Z\-_.äöüéèêÜÄÖß etc]+)([^>]*)?(<[^>]*><[^>]*>)?<\/span>[^>]*<\/span>(&nbsp;)?/g,
          ''
        );
      }
      if (contentMention[index].match(/^(cxid[0-9]{1,8})$/)) {
        if (contentMention[index - 1].includes('{mentionuser=') || contentMention[index - 1] === undefined) {
          //
        } else {
          contentMention[index] = `{mentionuser=${contentMention[index]}}`;
        }
      }
    }
    let content = contentMention.join('').trim();
    console.log('====', content);
    return content;
  }

В Chrome Firefox работает без проблем, но в Edge и Internet Explorer не работает. Есть идеи, что может быть причиной?

Answer 1

Вы можете уменьшить свои головные боли, анализируя и обрабатывая строку как DOM, вместо использования регулярных выражений:

function replaceMention(text) {
  if (!text) {
    return '';
  }

  //parse the template
  const parser = new DOMParser();
  const doc = parser.parseFromString(text, "text/html");

  //select ID that starts with `cxid`
  const mentionData = doc.querySelector('[id^="cxid"]');

  //get the user id
  const user = mentionData.id;

  //replace the span with the data for the user
  const replacement = document.createTextNode("{mentionuser=" + user + "}");
  mentionData.parentNode.replaceChild(replacement, mentionData);

  // return the new template
  const content = doc.body.innerHTML;
  return content;
}


const input = '<p>lkmlsdkmlskdmflsdk <span class="mention-user" data-initials="AG" data-name="AndréèêÜÄÖß_Güntheräö" id="cxid5024056"><span contenteditable="false"><!----><span class="initials"><!---->AG<!----></span>AndréèêÜÄÖß_Güntheräö<!----><!----></span></span> laksmlaksm lkmalskamlskmaldksml</p>';

const result = replaceMention(input);

console.log(result);