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

【问题标题】：Replace specific words in textarea and highlight changes?替换文本区域中的特定单词并突出显示更改？
【发布时间】：2015-01-23 14:13:30
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery replace split highlight

【解决方案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/

【讨论】：

这对我来说非常好用，谢谢。更详细地说，我们可以根据类别对亮点进行颜色编码吗？ jsfiddle.net/4su60eLm/3
每个类别的数组和for语句之类的东西？ jsfiddle.net/4su60eLm/4
当然。我叉了你的小提琴，只需将array 更改为values、syntax 和db：jsfiddle.net/Lfeo08da
不客气。 @Smeagol 建议使用 replace 而不是 split + join。以前是split+join比较快，但是现代浏览器优化了replace函数，现在是最好的方法了。

【解决方案2】：

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

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 而不是文本区域。

【讨论】：

【解决方案3】：

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

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

【讨论】：

我应该如何使用它？

【解决方案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);
});

并特别注意转义正则表达式的特殊字符 - 请参阅我的示例中的第一个数组值。

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

【讨论】：