Jquery 在字符串中查找字符并应用自定义类

Question

更新:

为了实现上面的排版，我将不得不使用一些 jquery/css 技巧。

首先，我必须创建一个类 .underlined 来设置背景图像，以完全控制下划线。 不幸的是，仅仅设置一个 border-bottom 是行不通的，因为它会使用字体的 x 高度。

其次，我必须找到特定字符，例如字符串中的小写 g 并删除 .underlined 类或应用额外的该特定字符的类。

现在如何匹配字符串中的 g、j、p、q、y 并在其上应用类？

应该和这个差不多，但是然后用reg exp什么的？

http://jsfiddle.net/hMEHB/2/

我尝试了 :contains 选择器，但我在拆分字符串并将其放回原处时遇到了问题。

Answer 1

使用 fiddle 中的标记，我相信您想要这样的东西:

var descenders = {"g": true, "j": true, "p": true, "q": true, "y": true};
$('a').each(function (i, elem) {
    var self = $(elem),
        textNodes = self.text().split(''),
        i = 0;
    for (i = 0; i < textNodes.length; i += 1) {
        if (descenders[textNodes[i]]) {
            textNodes[i] = '<span class="descender">' + textNodes[i] + '</span>';
        } else {
            textNodes[i] = '<span class="underline">' + textNodes[i] + '</span>';
        }
    }
    self.html(textNodes.join(''));
});

更新 fiddle :http://jsfiddle.net/hMEHB/15/