匹配文本内容并应用样式

时间:2013-05-17 09:16:26

标签: html css user-interface css-selectors

我想要将自定义样式应用于:

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

我想知道(A)我是否可以选择%1$tY部分,(B)是否使用自定义样式(颜色更改或边框,或使用带有多个选项元素的选择的整个替换)显示< / p>

你认为这是可能的吗?你会怎么做?

1 个答案:

答案 0 :(得分:1)

看到这个小提琴: http://jsfiddle.net/vLEMN/1/

HTML:

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

jQuery的:

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

CSS:

.filename-wrapper {
    position: relative;
}

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

.stylable {
    color: red;
}

这不是最动态的解决方案,但如果您总是需要选择%1$tY,应该没问题 并保持原始.filename内容不变。