正则表达式匹配字符串中除数据值属性之外的所有属性

Question

我正在寻找一个正则表达式来跳过字符串中的data-value="4" 属性，例如我有一个字符串，即

Hello this is string <sfpart contenteditable="false" data-value="4">&rlm;</sfpart> and the 4 number in string

现在在上面的字符串中，我想用<span class="yellow">4</span> 替换4，但不是data-value="4" 内的4

我可以通过以下代码获取4 并用<span class="yellow">4</span> 替换它

const reg = new RegExp('('4')', 'gi');
const str = str.replaceAll(reg, '<span class="yellow">$1</span>');

但问题在于正则表达式在 data-value 属性中选择 4 并将其替换为 html span 标签，即 data-value="<span class="yellow">4</span>" 所以我想跳过这部分。

有什么可以帮忙的吗？

Answer 1

使用assertions。在这种情况下，消极的回顾：

(?<!data-value=")\d+

这将确保您仅匹配不紧跟在 data-value 属性名称之前的字符 4（以及作为属性值前缀的 ="）。

在这里试试：https://regex101.com/r/SzPUOx/1

Answer 2

您不应该使用正则表达式来匹配 HTML 标记和属性。改为使用 DOMParser 解析您的字符串，然后遍历所有 nodeChildren 并在文本节点中执行替换（这将具有 3 的 nodeType）：

const string = 'Hello this is string <sfpart contenteditable="false" data-value="4">&rlm;</sfpart> and the 4 number in string';

const parser = new DOMParser();
const parsedNode = parser.parseFromString(string, "text/html").body;

for (let i = 0; i < parsedNode.childNodes.length; i++) {
  const node = parsedNode.childNodes[i];
  if (node.nodeType === 3) {
    const replacementNode = document.createElement('span');
    replacementNode.innerHTML = node.textContent.replaceAll(/(\d+?)/gi, '<span class="yellow">$1</span>');
    node.parentNode.insertBefore(replacementNode, node);
    node.parentNode.removeChild(node);
  }
}

console.log(`Input:\n${string}`);
console.log(`Output:\n${parsedNode.innerHTML}`);
document.querySelector('#input').innerHTML = string;
document.querySelector('#output').innerHTML = parsedNode.innerHTML;

#input,
#output {
  border: 1px solid #000;
  padding: 8px;
  margin: 8px;
}

span.yellow {
  background-color: yellow;
}

<strong>Input:</strong>
<div id="input"></div>

<strong>Output:</strong>
<div id="output"></div>