代码之家 › 专栏 › 技术社区 › Miguel Frias

Javascript正则表达式在Edge中出现故障,但在所有其他浏览器中都可以工作

regex html javascript

Miguel Frias · 技术社区 · 5 年前

我有一个字符串,基本上是HTML模板:

lkmlsdkmlskdmflsdk AGAndrÃ©Ã¨ÃªÃÃÃÃ_GÃ¼ntherÃ¤Ã¶ laksmlaksm lkmalskamlskmaldksml

我使用这个regex函数删除了提及的HTML,并更改了提及的id,因此我应该返回这个字符串:

lkmlsdkmlskdmflsdk {mentionuser=cxid5024056} laksmlaksm kmalskamlskmaldksml

结果我得到了这个:

asÃ±ald,Ã±sdl, {mentionuser=cxid5024056}" data-initials="AG" data-name="AndrÃ©Ã¨ÃªÃÃÃÃ_GÃ¼ntherÃ¤Ã¶ laksmlaksm kmalskamlskmaldksml

为此,我将使用此函数替换提提id格式的提提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和internetexplorer中就不行了。知道原因是什么吗?

0 回复 | 直到 5 年前

VLAZ Sohail Arif 5 年前

通过将字符串作为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);