Question

我正在构建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>

Answer 1

一个选择是使用替换函数，并在每次调用时增加计数器。您还应该将正则表达式固定为alt属性中的初始双引号或单引号 capture ，以便以后可以使用反向引用进行匹配。使用这种反向引用策略，您还可以将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

获取正则表达式.replace（）发生的次数

2 个答案: