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 部分，因此前后的伪元素不起作用，因为它们不可搜索。

Answer 1

我实际上仍然不是 100%，确定这是否是您想要实现的目标，但这是我知道的解决方案。

// 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>