使用 HTML 用图像替换字符

Question

我想用颜色字段（正方形或圆形）替换文本中的特定元音，例如"Anna" 这个词变成了（黄色色域）nn（黄色色域）。到目前为止，我已经发现该元素似乎是可行的方法，但是我从哪里得到我的图像呢？ HTML 中的替换操作是如何工作的？您可以推荐此类操作的教程吗？非常感谢 n00b！

Answer 1

您可以使用 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;

对于这个例子，每个字母 class 的名字应该有一个对应的 CSS 定义，例如：

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

Fiddle: http://jsfiddle.net/ganskop/mbxf1z7g/5/

Answer 2

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

$(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 3

"replace option" 不能在 HTML 中工作，因为 HTML 不是一种编程语言，所以它不能做你想做的事。您唯一的选择是使用 javascript 或在服务器端。

使用 HTML 用图像替换字符

Replacing characters with images using HTML

html

text-styling