jquery - 替换 jQuery 中的文本

Question

HTML：

<textarea></textarea><br />
<a href="#">Generate</a>

<span id="output"></span>

jQuery：

$('textarea').bind('keypress', function(event) { 
    var charCode = event.which;
    var keyChar = String.fromCharCode(charCode); 
    return /[a-zA-Z ]/.test(keyChar); 
});

var replacements = {
    'a': '1',
    'b': '2',
    'c': '3'
}

$('a').click(function() {
    $('textarea').val(function(i, val) {
        val = val.split('');

        $.each(val, function(i, e) {
            val[i] = replacements[e] ? replacements[e] : e;
        });

        return val.join('');
    });
    return false;
});

http://jsfiddle.net/sta75/

---

如何修改此现有代码以显示替换$('span#output');？作为一个附带问题，可以进行哪些修改以使此代码更高效？

Answer 1

而不是这样做：

return val.join('');

做：

$('span#output').html(val.join(''));

Answer 2

这是在 #output 中显示替换的解决方案：

$('textarea').bind('keypress', function(event) {     
    return /[a-zA-Z ]/.test(String.fromCharCode(event.which)); 
});

var replacements = {
    'a': '1',
    'b': '2',
    'c': '3'
}

$('a').on('click', function(e) {
    e.preventDefault();
   val =  $('textarea').val().split('');    
    $.each(val, function(i, e) {
        val[i] = replacements[e] ? replacements[e] : e;
    });
    $('#output').html(val.join(''))  ;    
});

http://jsfiddle.net/sta75/1/

Answer 3

只需添加 $('#output').html( $('textarea').val());

$('a').click(function() {
$('textarea').val(function(i, val) {
    val = val.split('');

    $.each(val, function(i, e) {
        val[i] = replacements[e] ? replacements[e] : e;
    });

    return val.join('');
});
$('#output').html( $('textarea').val()); //here
return false;

});