Html 匹配文本内容并应用样式

我有一些文本部分需要应用自定义样式：

<span class="filename">ExportFileName_datefollows_%1$tY.txt<span/>

ExportFileName\u datefollowers\u%1$tY.txt

我想知道（A）我是否可以选择

%1$tY

部分，以及（B）是否可以使用自定义样式显示它（颜色更改、边框或使用“选择多选项”元素的整个替换）

你认为这可能吗？你会怎么做？

看这把小提琴：

HTML:

<div class="filename-wrapper">
    <span class="filename"> 
        ExportFileName_datefollows_%1$tY.txt 
    </span>
    <span class="filename-clone">
    </span>
</div>

它不是最具动态性的解决方案，但如果您总是需要选择

%1$tY

---

并保持原始

.filename

内容完整。

仅使用CSS还是JavaScript是一种可能的解决方案？仅使用CSS会很好，但JS是一种选择。问题是我想保持“ExportFileName\u datefollows\u%1$tY.txt”的完整性，以便可以直接提交到数据库中。%1$tY将在后端显示年份，但这种格式对用户来说太陌生了。无法仅对该字符串的一部分进行样式设置。尽管您可以在现有元素的基础上添加第二个具有相同html内容的元素，并通过JavaScript将%1$tY包装在单独的范围内。这将保持现有的

.filename

完好无损。@KilianStinson现有元素之上的第二个元素是什么意思？类似这样的东西很好：）这正是我需要的。非常感谢。

var cloneContent = $('.filename').html();
cloneContent = cloneContent.replace('%1$tY', '<span class="stylable">%1$tY</span>');
$('.filename-clone').html(cloneContent);

.filename-wrapper {
    position: relative;
}

.filename-clone {
    background-color: #fff;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

.stylable {
    color: red;
}