Javascript Regex failling in Edge but working in all other browsers

Question

I have this string that is basically and HTML template for a mention:

lkmlsdkmlskdmflsdk AGAndréèêÜÄÖß_Güntheräö laksmlaksm lkmalskamlskmaldksml

and I'm using this regex function to remove the HTML of the mention and change for the id of the mention, as a result I should have back this string:

lkmlsdkmlskdmflsdk {mentionuser=cxid5024056} laksmlaksm kmalskamlskmaldksml

as a result I am getting this:

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

for this I'm using this function to replace the mention HTML for the mention id format:

Replace mention function

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;
  }

In Chrome, Firefox work without any problem but in Edge and Internet Explorer doesn't work. Any idea what could be reason?

Have you tried parsing this as DOM, instead of [trying to parse it with regex](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags)? — VLAZ, Jul 01 '19 at 12:41
i can not do that, because i need to send as a string to the backend, and in the front end need to to displayed with full html template, i take the string of the html and remove the template to place the id of the mention and then send it to the backend as string — Miguel Frias, Jul 01 '19 at 12:42
I cannot reproduce the difference in behavior with Chrome 75.0.3770.100 and Edge 44.17763.1.0 ( Edge 18 ), using untyped JS ( `function replaceMention(text ) {` as the first line of fn def, no other changes ). On both platforms the result is `
lkmlsdkmlskdmflsdk {mentionuser=cxid5024056} laksmlaksm lkmalskamlskmaldksml
` (Test executed in the JS console) — collapsar, Jul 01 '19 at 12:44
I would guess that this is a charset issue on Edge, with a charset mismatch of the diacritic characters in the `data-name` attribute of your test string or the respective character class definition of the regex. — collapsar, Jul 01 '19 at 12:48
I try that, but if you check in the regex im removing every single character inside of the `]*>` every single attribute of the html element — Miguel Frias, Jul 01 '19 at 12:51

VLAZ · Answer 1 · 2019-07-01T13:30:38.890

You can reduce your headaches by parsing and manipulating the string as DOM, instead of using regular expressions:

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);

Javascript Regex failling in Edge but working in all other browsers

1 Answers1