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

Question

I am working on a very large project and having to convert a lot FoxPro to C#. I am putting together a tool to help me convert the bulk of the code (that I keep find/replacing anyways) and by no means do I use it as a fix all. What I'm trying to accomplish is where a common word in FoxPro in the input textarea ("Else" for example) will be replaced with it's C#/Javascript counterpart ("} else {") and the newly converted block of code will be shown in the output textarea. So I'm creating a list of replacements:

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

and for each first word found in the input textarea, replace with the second word and paste the entire block in the output. I have some moderately working examples in the 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);                
});

BONUS POINTS Can we also highlight the changed words in the input and output (i understand we cannot highlight in textareas so maybe make this a div instead)? http://jsfiddle.net/aa72vg2c/10/

Answer 1

You overwriting "converted" with last input replace, so only last value is replaced. And why use split join instead simple replace? It should look like this:

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

If you wanna colors you can always do something like this:

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

and place it into div instead of text area.

Answer 2

why not using replace as you first did?

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);               
});

add the g flag to replace to get all occurences.

FIDDLE

Answer 3

Add divs input and output , and this should do it:

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

Global replacement would be easy task with 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);
});

And pay much attention to escape special characters for Regexp - see first array values in my example.

Working jsfiddle: http://jsfiddle.net/aa72vg2c/13/