텍스트 영역의 특정 단어를 바꾸고 변경 사항을 강조 표시 하시겠습니까?

Question

저는 매우 큰 프로젝트를 진행하고 있으며 많은 FoxPro를 C#으로 변환해야합니다. 나는 코드의 대부분을 변환하고 (어쨌든 찾기/대체하는) 도움을주는 도구를 함께 사용하고 있으며, 결코 모든 것을 수정으로 사용하지는 않는다. 내가 성취하려고하는 것은 입력 텍스트 영역 (예를 들어 "Else")에서 FoxPro의 일반적인 단어가 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);     
}); 

보너스 포인트 우리는 (그래서 아마 대신 사업부 있도록 우리가 텍스트 영역에서 강조 표시 할 수없는 이해) 입력 및 출력의 변경 단어를 강조 할 수 있습니까? 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/

Answer 2

마지막 입력으로 "변환"을 덮어 쓰므로 마지막 값만 바뀝니다. 왜 split join 대신 simple join을 사용합니까? 은 다음과 같아야합니다

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

하는 당신은 항상 이런 일을 할 수 있는지 싶어 색상 경우

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

을 대신 텍스트 영역의 사업부로 배치합니다.

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

모든 발행 수를 얻을 수 replace에 g 플래그를 추가합니다.

FIDDLE

Answer 4

글로벌 교체는 정규 표현식과 쉬운 작업이 될 것입니다 :

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의 특수 문자를 이스케이프 처리하는 데 많은주의를 기울이십시오. 예제의 첫 번째 배열 값을 참조하십시오.

근무일 : http://jsfiddle.net/aa72vg2c/13/