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

我正在处理一个非常大的项目，并且需要将很多FoxPro转换为C＃。我正在编写一个工具来帮助我转换大部分代码（我始终会查找/替换），决不会将它用作修补程序。我试图完成的是在输入textarea（例如“Else”）中的FoxPro中的常见单词将替换为C＃/ Javascript对应（“} else {”），并且新转换的代码块将会显示在输出textarea中。所以我创建的替代者名单：替换textarea中的特定单词并突出显示更改？

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

，并在输入文本区域找到的每个第一个字，替换为第二个字并粘贴到输出的整个街区。小提琴中我有一些适度的例子。

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

来源

2014-11-25 triplethreat77

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

来源

2014-11-25 15:06:51

这对我来说非常好，谢谢。为了进一步阐述，我们可以根据类别对亮点进行颜色编码吗？ http://jsfiddle.net/4su60eLm/3/ – triplethreat77 2014-11-25 15:29:11

像是一个数组和每个类别的语句？ http://jsfiddle.net/4su60eLm/4/ – triplethreat77 2014-11-25 15:32:48

当然。我分叉你的小提琴，并简单地将'array'更改为'values'，'syntax'和'db'：http://jsfiddle.net/Lfeo08da/ – 2014-11-25 15:42:45

你用上次输入替换覆盖“转换”，所以只有最后一个值被替换。为什么使用分割连接而不是简单的替换？它应该是这样的：

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

如果你想颜色你总是可以做这样的事情：

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

，并放入格，而不是文本区域。

来源

2014-11-25 14:53:33 pbogut

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

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

来源

2014-11-25 14:53:42 MamaWalter

'g'标志不会像那样工作。 – 2014-11-25 15:01:49

和我应该如何使用它？ – MamaWalter 2014-11-25 15:04:39

看到我的答案... – 2014-11-25 15:19:08

全局替换将是一件容易的事与正则表达式：

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转义特殊字符 - 参见我的示例中的第一个数组值。

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

来源

2014-11-25 15:10:03

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

回答

相关问题