用Jquery中的图像替换多个字符

Question

我有一个小问题 - 我想用 H1 元素中的图像替换字符“K”和“k”。

我已经尝试过了，它对一个角色来说效果很好：

$(function() {
    $("h1").each(function() { 
        if($(this).children().length==0) { 
            $(this).html($(this).text().replace('K', '<img src="http://www.fotograf-in-frankfurt.biz/img/v2013/k_cap.png" style="display:inline-block;" alt="K">'));
        } 
    });
});

这个对于大写“K”来说效果很好，但现在我也想替换较低的 - 所以我尝试了这个：

$(function() {
    $("h1").each(function() { 
        if($(this).children().length==0) { 
            $(this).html($(this).text().replace('K', '<img src="http://www.fotograf-in-frankfurt.biz/img/v2013/k_cap.png" style="display:inline-block;" alt="K">').replace('k', '<img src="http://www.fotograf-in-frankfurt.biz/img/v2013/k_low.png" style="display:inline-block;" alt="k">'));
        } 
    });
});

最终的结果看起来有点令人毛骨悚然 - 像这样：

furt.biz/img/v2013/k_cap.png" style="display:inline-block;" alt="K">ontakt & Terminvereinbarung

但它应该更像这样替换字符：

联系和终端连接

我很确定我犯了一个错误，也许是个白痴，但在哪里？

非常感谢您的帮助！

Answer 1

将string.replace 与函数一起用作第二个参数。这将匹配作为参数接收，并返回要替换它的值。这使您可以一次完成所有操作，因此您无需重新处理第一遍的输出。

str.replace(/k/ig, function(char) {
    switch(char) {
        case 'K':
           return '<img src="http://www.fotograf-in-frankfurt.biz/img/v2013/k_cap.png" style="display:inline-block;" alt="K">';
           break;
        case 'k':
           return '<img src="http://www.fotograf-in-frankfurt.biz/img/v2013/k_low.png" style="display:inline-block;" alt="k">';
           break;
     }
});

您还需要使用带有g 修饰符的正则表达式来替换所有实例。当您使用字符串或不带g 的正则表达式时，它只会进行一次替换。

Answer 2

您似乎还替换了图像标签内部的“k”，例如fran*k*furt. 您可以首先用“UPPERREP”替换所有大写字母K，用“LOWERREP”替换所有小写字母，然后用图像替换。这样，您可以避免在添加第二个图像元素时破坏、替换或完全删除第一个图像元素。

Answer 3

您还将 HTML 代码的内部字母替换为 k 和 K， 执行以下操作。

str=[your string].replace('K', '!!__Big__!!').replace('k', '!!__Small__!!');
str=str.replace("!!__Big__!!", "[code here]").replace("!!__Small__!!","[Code here]");