html - 使用 HTML 将字符替换为图像

Question

我想用颜色字段（正方形或圆形）替换文本中的特定元音，例如单词“Anna”变成（黄色字段）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 正则表达式来搜索元音并将它们替换为字形或简单的带有背景颜色的跨度。例如：

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 或在服务器端。