求JavaScript正则表达式'y'标志的IE兼容polyfill

Great question! IE's lack of support for the y (sticky) regex flag is definitely a pain point when building autocomplete controls that rely on precise position-based matching. Luckily, there are a couple of solid workarounds to handle this.

方案1：Sticky标志的Polyfill #

You can add support for the y flag in IE by polyfilling the RegExp prototype. This approach mimics the native sticky behavior by overriding the exec method to enforce matching only at the exact lastIndex position:

if (!RegExp.prototype.sticky) {
  // 添加sticky属性到RegExp原型
  Object.defineProperty(RegExp.prototype, 'sticky', {
    get: function() {
      return this.hasOwnProperty('_sticky') && this._sticky;
    },
    set: function(value) {
      this._sticky = Boolean(value);
      // 粘连模式依赖全局模式的lastIndex，所以自动添加g标志
      if (this._sticky && !this.global) {
        const flags = this.flags ? this.flags + 'g' : 'g';
        const newRegex = new RegExp(this.source, flags);
        newRegex._sticky = true;
        Object.assign(this, newRegex);
      }
    }
  });

  // 重写exec方法以模拟粘连匹配
  const originalExec = RegExp.prototype.exec;
  RegExp.prototype.exec = function(str) {
    if (!this.sticky) {
      return originalExec.call(this, str);
    }

    const originalLastIndex = this.lastIndex;
    const match = originalExec.call(this, str);

    // 只有当匹配起始位置等于lastIndex时才返回结果，否则重置lastIndex
    if (match && match.index !== originalLastIndex) {
      this.lastIndex = originalLastIndex;
      return null;
    }

    return match;
  };
}

使用方式 #

Once the polyfill is loaded, you can use the sticky flag just like in modern browsers:

const regex = new RegExp('your-pattern', 'y');
regex.lastIndex = 3; // 从字符串的第3个索引位置开始匹配
const match = regex.exec('your-test-string');

方案2：手动模拟粘连匹配行为 #

If you prefer not to modify the global RegExp prototype, you can replicate sticky matching behavior manually by focusing on exact position matching:

核心思路 #

The y flag requires matches to start exactly at the lastIndex position. You can achieve this by:

1. Slicing the input string to start at your target position
2. Using ^ to enforce matches at the start of the sliced substring
3. Adjusting the match index to reflect the original string's position

示例代码 #

function stickyMatch(regexPattern, inputStr, startPos) {
  // 创建带有^的正则，强制从子串开头匹配
  const regex = new RegExp(`^${regexPattern}`);
  const subStr = inputStr.slice(startPos);
  const match = regex.exec(subStr);

  if (match) {
    // 修正匹配索引为原字符串中的位置
    match.index += startPos;
    // 如果需要后续匹配，更新起始位置
    // startPos += match[0].length;
    return match;
  }
  return null;
}

// 使用示例
const result = stickyMatch('foo', 'xxfoobar', 2);
// result.index 会是2，匹配的是从索引2开始的"foo"

注意事项 #

• Polyfill Caveats: The polyfill works for most use cases, but it won't perfectly replicate all native sticky flag behavior (like interactions with the flags property in edge cases). Test thoroughly with your autocomplete logic.
• Manual Approach Flexibility: This method avoids prototype pollution and is often easier to debug in IE, since you have full control over the matching position.
• Autocomplete Specific Tips: For autocomplete, you'll likely be matching user input against a list of options. You can optimize the manual approach by pre-processing options or using substring checks alongside regex when appropriate.

内容的提问来源于stack exchange，提问作者Cami Rodriguez