获取发生regex .replace()次数

Question

我正在构建一个html linter，我要做的第一件事就是删除所有的alt属性。我用正则表达式替换alt标签。是否有办法删除数字alt代码。

如果你粘贴：

alt="23432“一二三alt='12312‘四五alt = "1124412”

你应该得到一二三四五六，我想把3存储在一个名为numReplaced的变量中。

​

function removeAlts(input) {
	var textIn = document.getElementById("textIn").value;
	var regex = /alt\s*=\s*[\"\'][a-zA-z0-9\s]*[\"\']/ig;
	var textOut = textIn.replace(regex, '');
	document.getElementById("textIn").value = textOut;
  //var numReplaced = ????
}

<button class="btn" onclick="removeAlts()">Remove Alts</button>
<div class="title">
	<h3>Paste code in box below and press button to remove alts!</h3>
</div>
<textarea name="input" id="textIn" cols="60" rows=15"></textarea>

​

Answer 1

一种选择是使用替换函数，并在每次调用计数器时增加计数器。您还应该修复regex以捕获alt属性中的初始双引号或单引号，以便以后可以将其与反向引用匹配。使用此反向引用策略，您还可以将alt的引号与其中的引号匹配，因此将"'添加到字符集中。

此外，您可以使用i标志而不是重复[a-zA-Z，使用\d代替0-9。此外，不需要用正则表达式文本转义引号。

​

function removeAlts(input) {
  var textIn = document.getElementById("textIn").value;
  var regex = /\s*alt\s*=\s*(["'])[a-z\d\s"']*?\1/ig;
  let counter = 0;
  var textOut = textIn.replace(regex, () => {
    counter++;
    return '';
  });
  document.getElementById("textIn").value = textOut;
  console.log(counter);
}

<button class="btn" onclick="removeAlts()">Remove Alts</button>
<div class="title">
  <h3>Paste code in box below and press button to remove alts!</h3>
</div>
<textarea name="input" id="textIn" cols="60" rows="15">
  <tag alt="foo"></tag>
  <tag alt="bar"></tag>
  <tag alt="that's okay"></tag>
</textarea>

​

但是使用DOMParser搜索所有带有alt属性的东西，并将它们删除，将会更加优雅。

​

function removeAlts(input) {
  var textIn = document.getElementById("textIn").value;
  const doc = new DOMParser().parseFromString(textIn, 'text/html');
  const alts = doc.querySelectorAll('[alt]');
  console.log(alts.length);
  alts.forEach(elm => elm.removeAttribute('alt'));
  document.getElementById("textIn").value = doc.body.innerHTML;
}

<button class="btn" onclick="removeAlts()">Remove Alts</button>
<div class="title">
  <h3>Paste code in box below and press button to remove alts!</h3>
</div>
<textarea name="input" id="textIn" cols="60" rows="15">
  <tag alt="foo"></tag>
  <tag alt="bar"></tag>
  <tag alt="that's okay"></tag>
</textarea>

​

Answer 2

您可以在模式的末尾使用相同的引号，如下所示：

/alt\s*=\s*(["']).+\1/ig