Question

我想用文本（正方形或圆形）替换文本中的特定元音，例如这个词＆＃34; Anna＆＃34;变成了（黄色场）nn（黄色场）。到目前为止，我已经发现该元素似乎是要走的路，但我在哪里可以得到我的图像？如何在HTML中使用替换操作？你可以推荐这种操作的教程吗？很多n00b提前感谢！

Answer 1

它不漂亮（我可能没有考虑过，因为它已经晚了），但这是一个例子：

$(function(){ // only using jquery for document load callback
  
function replaceVowel(node,vowel,replacement){
    vowel = vowel.toLowerCase();
    for (var i = 0; i < node.childNodes.length; i++){
        var child = node.childNodes[0];
        if (child.nodeType === 3){
            var tn = [];
            for (var j = 0; j < child.nodeValue.length; j++){
                var c = child.nodeValue.charAt(j).toLowerCase();
                if (child.nodeValue.charAt(j).toLowerCase() == vowel){
                    if (tn.length){
                        node.insertBefore(document.createTextNode(tn.join('')), child);
                        tn = [];
                    }
                    node.insertBefore(replacement.cloneNode(), child);
                }else{
                    tn.push(child.nodeValue.charAt(j));
                }
            }
            if (tn.length){
                node.insertBefore(document.createTextNode(tn.join('')), child);
            }
            node.removeChild(child);
        }
    }
}

var name = document.getElementById('name');
var i = document.createElement('img');
    i.src = 'http://placehold.it/10/FFEC8B&text=a';
    i.width = 10;
    i.height = 10;
    i.alt = 'a';
replaceVowel(name,'a',i);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="name">Anna</p>

Answer 2

您可以使用JavaScript正则表达式搜索元音并将其替换为glyphicon或仅使用背景颜色的span。 E.g：

var lipsum = document.getElementsByTagName("div")[0].innerHTML;

// search for all vowels
lipsum = lipsum.replace( /[aeiou]/gi, function(x) { 
    // replace each vowel with a span that has a class with a value of that vowel
    return "<span class='" + x + "'>&ensp;</span>"; 
});

document.getElementsByTagName("div")[0].innerHTML = lipsum;

对于此示例，每个字母类名称应具有相应的CSS定义，例如：

span.a {
    background-color: yellow;
}
span.e {
    background-color: red;
}
...

小提琴：http://jsfiddle.net/ganskop/mbxf1z7g/5/

Answer 3

“替换选项”无法在HTML中起作用，因为HTML不是一种编程语言，因此它无法满足您的需求。您唯一的选择是使用javascript或在服务器端。

使用HTML替换图像中的字符

3 个答案: