返回 Javascript 中正则表达式 match() 的位置？

Question

有没有办法在 Javascript 中检索正则表达式 match() 结果字符串中的（起始）字符位置？

Answer 1

exec 返回一个带有index 属性的对象：

var match = /bar/.exec("foobar");
if (match) {
    console.log("match found at " + match.index);
}

对于多个匹配项：

var re = /bar/g,
    str = "foobarfoobar";
while ((match = re.exec(str)) != null) {
    console.log("match found at " + match.index);
}

Answer 2

您可以使用String 对象的search 方法。这仅适用于第一场比赛，但会按照您的描述进行。例如：

"How are you?".search(/are/);
// 4

Answer 3

这是我想出的：

// Finds starting and ending positions of quoted text
// in double or single quotes with escape char support like \" \'
var str = "this is a \"quoted\" string as you can 'read'";

var patt = /'((?:\\.|[^'])*)'|"((?:\\.|[^"])*)"/igm;

while (match = patt.exec(str)) {
  console.log(match.index + ' ' + patt.lastIndex);
}

Answer 4

这个成员 fn 返回一个从 0 开始的位置数组，如果有的话，在 String 对象中的输入单词

String.prototype.matching_positions = function( _word, _case_sensitive, _whole_words, _multiline )
{
   /*besides '_word' param, others are flags (0|1)*/
   var _match_pattern = "g"+(_case_sensitive?"i":"")+(_multiline?"m":"") ;
   var _bound = _whole_words ? "\\b" : "" ;
   var _re = new RegExp( _bound+_word+_bound, _match_pattern );
   var _pos = [], _chunk, _index = 0 ;

   while( true )
   {
      _chunk = _re.exec( this ) ;
      if ( _chunk == null ) break ;
      _pos.push( _chunk['index'] ) ;
      _re.lastIndex = _chunk['index']+1 ;
   }

   return _pos ;
}

现在试试

var _sentence = "What do doers want ? What do doers need ?" ;
var _word = "do" ;
console.log( _sentence.matching_positions( _word, 1, 0, 0 ) );
console.log( _sentence.matching_positions( _word, 1, 1, 0 ) );

也可以输入正则表达式：

var _second = "z^2+2z-1" ;
console.log( _second.matching_positions( "[0-9]\z+", 0, 0, 0 ) );

这里得到线性词的位置索引。

Answer 5

来自developer.mozilla.org 字符串.match() 方法的文档：

返回的 Array 有一个额外的输入属性，其中包含 被解析的原始字符串。此外，它有一个索引 属性，它表示匹配项中从零开始的索引 字符串。

在处理非全局正则表达式时（即，您的正则表达式上没有g 标志），.match() 返回的值具有index 属性...您所要做的就是访问它。

var index = str.match(/regex/).index;

下面是一个例子，显示它也能正常工作：

var str = 'my string here';

var index = str.match(/here/).index;

console.log(index); // <- 10

我已经成功地测试了这一切，回到 IE5。

Answer 6

var str = "The rain in SPAIN stays mainly in the plain";

function searchIndex(str, searchValue, isCaseSensitive) {
  var modifiers = isCaseSensitive ? 'gi' : 'g';
  var regExpValue = new RegExp(searchValue, modifiers);
  var matches = [];
  var startIndex = 0;
  var arr = str.match(regExpValue);

  [].forEach.call(arr, function(element) {
    startIndex = str.indexOf(element, startIndex);
    matches.push(startIndex++);
  });

  return matches;
}

console.log(searchIndex(str, 'ain', true));

Answer 7

这是我最近发现的一个很酷的功能，我在控制台上尝试过，它似乎可以工作：

var text = "border-bottom-left-radius";

var newText = text.replace(/-/g,function(match, index){
    return " " + index + " ";
});

返回：“边框 6 底部 13 左 18 半径”

所以这似乎是您正在寻找的。

Answer 8

function trimRegex(str, regex){
    return str.substr(str.match(regex).index).split('').reverse().join('').substr(str.match(regex).index).split('').reverse().join('');
}

let test = '||ab||cd||';
trimRegex(test, /[^|]/);
console.log(test); //output: ab||cd

或

function trimChar(str, trim, req){
    let regex = new RegExp('[^'+trim+']');
    return str.substr(str.match(regex).index).split('').reverse().join('').substr(str.match(regex).index).split('').reverse().join('');
}

let test = '||ab||cd||';
trimChar(test, '|');
console.log(test); //output: ab||cd

Answer 9

在现代浏览器中，您可以使用string.matchAll() 完成此操作。

与RegExp.exec() 相比，这种方法的好处是它不依赖于有状态的正则表达式，如@Gumbo's answer。

let regexp = /bar/g;
let str = 'foobarfoobar';

let matches = [...str.matchAll(regexp)];
matches.forEach((match) => {
    console.log("match found at " + match.index);
});

Answer 10

var str = 'my string here';

var index = str.match(/hre/).index;

alert(index); // <- 10

Answer 11

如果您的正则表达式与宽度 0 匹配，恐怕前面的答案（基于 exec）似乎不起作用。例如（注意：/\b/g 是应该找到所有单词边界的正则表达式）：

var re = /\b/g,
    str = "hello world";
var guard = 10;
while ((match = re.exec(str)) != null) {
    console.log("match found at " + match.index);
    if (guard-- < 0) {
      console.error("Infinite loop detected")
      break;
    }
}

可以尝试通过让正则表达式匹配至少 1 个字符来解决此问题，但这远非理想（意味着您必须在字符串末尾手动添加索引）

var re = /\b./g,
    str = "hello world";
var guard = 10;
while ((match = re.exec(str)) != null) {
    console.log("match found at " + match.index);
    if (guard-- < 0) {
      console.error("Infinite loop detected")
      break;
    }
}

更好的解决方案（仅适用于较新的浏览器/需要在旧/IE 版本上使用 polyfill）是使用String.prototype.matchAll()

var re = /\b/g,
    str = "hello world";
console.log(Array.from(str.matchAll(re)).map(match => match.index))

解释：

String.prototype.matchAll() 需要一个全局正则表达式（带有g 的全局标志集）。然后它返回一个迭代器。为了循环和map() 迭代器，它必须变成一个数组（这正是Array.from() 所做的）。与RegExp.prototype.exec() 的结果一样，根据规范，结果元素具有.index 字段。

有关浏览器支持和 polyfill 选项，请参阅 String.prototype.matchAll() 和 Array.from() MDN 页面。

---

编辑：更深入地寻找所有浏览器都支持的解决方案

RegExp.prototype.exec() 的问题在于它更新了正则表达式上的lastIndex 指针，下次从之前找到的lastIndex 开始搜索。

var re = /l/g,
str = "hello world";
console.log(re.lastIndex)
re.exec(str)
console.log(re.lastIndex)
re.exec(str)
console.log(re.lastIndex)
re.exec(str)
console.log(re.lastIndex)

只要正则表达式匹配实际上有一个宽度，这就很好用。如果使用 0 宽度的正则表达式，该指针不会增加，因此您会得到无限循环（注意：/(?=l)/g 是 l 的前瞻——它匹配 l 之前的 0 宽度字符串。所以它正确运行在第一次调用 exec() 时索引 2，然后停留在那里：

var re = /(?=l)/g,
str = "hello world";
console.log(re.lastIndex)
re.exec(str)
console.log(re.lastIndex)
re.exec(str)
console.log(re.lastIndex)
re.exec(str)
console.log(re.lastIndex)

解决方案（不如 matchAll() 好，但应该适用于所有浏览器）因此如果匹配宽度为 0，则手动增加 lastIndex（可以通过不同方式检查）

var re = /\b/g,
    str = "hello world";
while ((match = re.exec(str)) != null) {
    console.log("match found at " + match.index);

    // alternative: if (match.index == re.lastIndex) {
    if (match[0].length == 0) {
      // we need to increase lastIndex -- this location was already matched,
      // we don't want to match it again (and get into an infinite loop)
      re.lastIndex++
    }
}