时间戳

首页 > 解决方案 > 获取正则表达式 .replace() 发生的次数

javascript - 获取正则表达式 .replace() 发生的次数

问题描述

我正在构建一个 html linter，我要做的第一件事是删除所有 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>

标签： javascripthtmlregex

解决方案

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

此外，您可以使用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>

推荐阅读