javascript - 在 jQuery 实时预览 div 中将文本转换为图像

Question

我需要一种将图像直接输出到实时预览 div 的方法用户输入字母。例如，如果用户输入字母“k”，则显示与“k”字母相关的图像。然而，目前只有在页面加载时预先输入的字母显示图像，而不是从 textarea 字段输入的字符，如您在此 [demo] 中所见(http://jsfiddle.net/jLzsrygv/8/)。

我使用的字符转图片的方法如下:

$('#target').each(function() {
var txt = $(this).html();
var img = '<img src="http://i.imgur.com/DWwRx9M.png" alt="' + txt + '" />'
var html = txt.replace(/\*/g, img);
$(this).html(html);
});

我尝试过的

我尝试更改 textarea 字段的允许标签以允许 img标签，然后用 master 控制这个(不可见的)文本区域textarea，但无济于事，因为 k 不会将自身转换为 img 标签在原始文本区域字段中。

因为直接插入 img 标签似乎是唯一对我有用的东西，所以我认为这是唯一可行的方法，我对language 用于第二个文本区域实时替换字母输入到主文本区域(例如“K”被替换为)我已经尝试过文本替换，但我觉得我与值或 innerHTML 相反，textContent 可能会出错。 This is as far as I've gotten .

非常感谢任何帮助。

Answer 1

您唯一没有做的是在有 keyup 时调用 .each() 方法。因此，.each() 仅在加载 JavaScript 时调用一次。将它们放在函数中并在 keyup 上调用函数。

$(document).ready(function(){
    change1();
    change2();
    $('#someTextBox').keyup(function(){
        $('#target').html($(this).val());
        change1();
        $('#target2').html($(this).val());
        change2();
    });
});

function change1() {
    $('#target').each(function() {
        var txt = $(this).html();
        var img = '<img src="http://i.imgur.com/DWwRx9M.png" alt="' + txt + '" />'
        var html = txt.replace(/\*/g, img);
        $(this).html(html);
    });
}

function change2() {
    $('#target2').each(function() {
        var txt = $(this).html();
        var img = '<img src="http://i.imgur.com/DWwRx9M.png" alt="' + txt + '" />'
        var html = txt.replace(/\*/g, img);
        //console.log(html);
        $(this).html(html);
    });
}

fiddle :http://jsfiddle.net/jLzsrygv/21/