css - 如何在 Firefox userContent.css 中使用 css 为 div 内的文本添加前缀和后缀

Question

我需要在 Firefox userContent.css 文件中使用 css 代码添加前缀和后缀。

之前的例子：

<div class="label">Royal Blue</div>
<div class="label">Royal Blue/Yellow</div>

我需要将其替换为：

<div class="label">#Royal Blue#</div>
<div class="label">#Royal Blue/Yellow#</div>

我需要它来搜索并通过搜索#Royal Blue# 找到这种颜色，而不是“Royal Blue/Yellow”中的 Royal Blue 部分，因此之前和之后的伪元素不起作用，因为它们不可搜索。

标签： cssregexfirefox

Answer 1

我实际上仍然不是 100%，确定这是否是您想要实现的目标，但这里有一个解决方案 afai 得到了它。

// Solution 1
document.querySelectorAll('.case1 .label').forEach(label => {
  label.textContent = `#${label.textContent}#`
});


// Solution 2 (Compatibility)
var labels = document.querySelectorAll('.case2 .label');
var labelCount = labels.length;

for(var i = 0; i < labelCount; i++) {
  labels[i].textContent = '#' + labels[i].textContent + '#';
}

<div class="case1">
<div class="label">Royal Blue</div>
<div class="label">Royal Blue/Yellow</div>
</div>
<div class="case2">
<div class="label">Royal Blue</div>
<div class="label">Royal Blue/Yellow</div>
</div>