时间戳

首页 > 解决方案 > Javascript Regex 在 Edge 中失败，但在所有其他浏览器中都可以使用

javascript - Javascript Regex 在 Edge 中失败，但在所有其他浏览器中都可以使用

问题描述

我有这个字符串，基本上是和 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 并更改提及的 id，因此我应该返回这个字符串：

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

结果我得到了这个：

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

为此，我使用此函数替换提及 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 和 Internet Explorer 中无法正常工作。知道可能是什么原因吗？

标签： javascripthtmlregex

解决方案

您可以通过将字符串解析和操作为 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);

推荐阅读