javascript - Javascript正则表达式可计算文本区域中主题标签的出现次数

我正在尝试像这样在文本区域中的每个主题标签之前添加一个计数值：

"An example #string containing a #few #hashtags"
"An example 1:#string containing a 2:#few 3:#hashtags"

我需要计数器在用户键入时实时显示。

我正在使用keyup()事件回调来检查textarea的值，并尝试使用正则表达式匹配项在每次出现hashtag之前插入计数：

let value = '';
let _textarea = document.querySelector('textarea');
_textarea.addEventListener('keyup', e => {
  value = _textarea.value;
  let tags = value.match(/(#\S*)/g); //Match all hashtags


  let i = 0;
  value = value.replace(/(#\S*)/g, matched => {
  	console.log(matched, i);
    i++;
    return i + ':' + matched;
  });


  _textarea.value = value;
  console.log(tags);
});

<textarea></textarea>

问题在于，这会在每个击键事件触发后连续添加计数器。

有什么合适的解决方案？

最佳答案

在@Cameron的answer的基础上进行了改进，它允许在字符串的开头也使用井号。

let _textarea = document.querySelector('textarea');
_textarea.addEventListener('keyup', e => {
  let target = e.target;
  let value = target.value;

  let i = 0;
  value = value.replace(/.?#/g, matched => {
    i++;
    let output = matched;
    if (/(?:[^:]|^)#/.test(matched)) {
      if(matched.length > 1) {
        output = `${matched[0]}${i}:${matched[1]}`;
      } else {
        output = `${i}:${matched[0]}`;
      }
    }
    return output;
  });

  _textarea.value = value;
});

<textarea></textarea>