Question

我正在开发一个非常大的项目，并且必须将很多FoxPro转换为C＃。我正在整理一个工具，以帮助我转换大量的代码（我一直在寻找/替换），绝不是我用它作为修复所有。我想要完成的是输入文本区域中的FoxPro中的常用单词（例如，＃34; Else＆＃34;）将替换为它的C＃/ Javascript对应框架（＆＃34; } else {＆＃34;）和新转换的代码块将显示在输出textarea中。所以我创建了一个替换列表：

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

并且对于输入textarea中找到的每个第一个单词，替换为第二个单词并将整个块粘贴到输出中。我在小提琴中有一些适度的工作例子。

$('#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);                
});

奖励积分我们是否还可以突出显示输入和输出中已更改的单词（我知道我们无法在textareas中突出显示，所以可能会将其改为div）？ http://jsfiddle.net/aa72vg2c/10/

Answer 1

您使用上次输入替换覆盖“已转换”，因此仅替换最后一个值。为什么使用拆分连接而不是简单替换？它应该是这样的：

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

如果你想要颜色，你可以做这样的事情：

converted = converted.replace(pair[0], '<span class="someclass">'+pair[1]+'</span>');

并将其放入div而不是文本区域。

Answer 2

为什么不像你第一次那样使用替换？

var replacements = [ 
                    ["?thisform.", "@"], 
                    ["Else", "} else {"],
                    ["*--", "//"],
                    ["\n", "<br>"],
                ];


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

    replacements.forEach(function(pair) {
        input = input.replace( pair[0], '<span class="high">'+ pair[1]+'</span>', "g");
    });

    // and paste final output
    $('#codeoutput').html(input);               
});

将g标记添加到replace以获取所有出现的内容。

FIDDLE

Answer 3

添加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/

Answer 4

使用Regexp轻松完成全局替换：

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

$('#convert').click(function(){
    var input = $('#codeinput').val();
    $.each(replacements, function(index, value){
     input = input.replace(new RegExp(value[0], 'g'),
              '<span class="high">'+ value[1]+'</span>');
    });
    $("#codeoutput").html(input);
});

并且非常注意为Regexp转义特殊字符 - 请参阅我的示例中的第一个数组值。

工作jsfiddle：http://jsfiddle.net/aa72vg2c/13/

替换textarea中的特定单词并突出显示更改？

4 个答案: