javascript - 替换文本区域中的特定单词并突出显示更改？

Question

我正在处理一个非常大的项目，并且必须将大量 FoxPro 转换为 C#。我正在组装一个工具来帮助我转换大部分代码(我一直在查找/替换)并且我决不会将它用作修复所有代码。我想要完成的是输入文本区域中 FoxPro 中的常用词(例如“Else”)将替换为它的 C#/Javascript 对应词(“} else {”)，新转换的代码块将是显示在输出文本区域中。所以我正在创建一个替换列表:

var replacements = [ 
                    ["?thisform.", "@"], 
                    ["Else", "} else {"],
                    ["*--", "//"]
                ];

对于在输入文本区域中找到的每个第一个单词，替换为第二个单词并将整个 block 粘贴到输出中。我在 fiddle 中有一些适度工作的例子。

$('#convert').click(function(){
    var input = $('#codeinput').val();

    replacements.forEach(function(pair) {
        converted = input.split(pair[0]).join(pair[1]);
    });

    //var converted = $("#codeinput").val()
                    //.replace("?thisform.", "@"); 


    // and paste final output
    $('#codeoutput').val(converted);                
});

奖励积分 我们是否也可以突出显示输入和输出中更改的单词(我知道我们不能在文本区域中突出显示，所以也许可以将其改为 div)？ http://jsfiddle.net/aa72vg2c/10/

Answer 1

添加 div input 和 output，应该这样做:

$('#convert').click(function(){
  var input = output = $('#codeinput').val();
  for(var val in array) {
    input= input.split(val).join('<span class="high">'+val+'</span>');
    output= output.split(val).join('<span class="high">'+array[val]+'</span>');
  }
  $('#input').html('<pre>'+input+'</pre>');
  $('#output').html('<pre>'+output+'</pre>')
});

http://jsfiddle.net/4su60eLm/1/