자바 스크립트를 사용하여 텍스트 상자에서 텍스트 바꾸기 (대소 문자 바꾸기)

Question

사용자 유형으로 '및'이 'AND \ n'으로 바뀌는 일종의 인텔리 센스 텍스트 입력 상자를 작성하려고합니다 (예 : 각 '및', '및'은 대문자로되어 사용자는 새 줄로 이동).

 

function Validate() 
{ 
document.getElementById("search").value = document.getElementById("search").value.replace("and","AND \n"); //new line for AND 
} 
 

하는 HTML 부분은 다음과 같이이다 :이 때문이다

자바 스크립트 내가 사용하는 위의 스크립트가 파이어 폭스와 크롬에서 잘 작동하지만

< textarea type="text" name="q" id="search" spellcheck="false" onkeyup='Validate();'>< /textarea> 

, 그것은 인터넷에서 무례한 행동 정렬의 Explorer (각 'KeyUp'의 텍스트 끝에 커서를 가져옵니다).

또한 'And', 'anD'또는 'AND'자체와 같은 'and'의 다른 변형에는 위의 코드가 작동하지 않습니다.

는

replace(/\band\b/i,"AND \n")

이 (/i)를 대소 문자를 구분하지 않습니다 그 방법 (아래 참조), 만 and 일치 하나의 단어를 취합니다

Answer 1

이 문제를 해결하려면 다음과 같은 자바 스크립트를 사용하여 해결하기 :

1 :

function Validate() { 
    if(document.getElementById("search").value.search(/\band$(?!\n)/i) >= 0){ // for maintaining cursor position 
     document.getElementById("search").value = document.getElementById("search").value.replace(/\band$(?!\n)/i,"AND\n"); //new line for AND 
    } 
} 

씬이 위의 문제와 해결책을 슬라이스를 나는 이것이 당신이 필요하다고 생각)이 함수는 각 키를 호출 할 때마다 호출되므로 이전의 "AND \ n"은 각 키가 반복 될 때마다 반복되므로 각 키를 누를 때마다 빈 줄이 삽입됩니다. 나는 정규식을 사용하여 위의 피 :

 
/\band$(?!\n)/i 

\b =처럼 단어 "및 \ n"따라서 항상 말 것으로 대체 될 것이다 라인의
$ = 끝 ((S 및을 피하기 위해) "와"
(?!\n)이 새로운 라인으로 추적 할 수 없음 =) 라인들 (반복 등

교체 "AND \ n을"각각의 키 누름)에
i = 모든 변형을 커버하는 "및"비롯한 "및", "와"방지

2) 입력을 다시 편집 할 때 Internet Explorer가 잘못 작동하고 커서 위치가 유지되지 않습니다 (끝으로 이동). 이것은 대체 기능으로 인해 위의 Alvaro가 암시 한 것입니다.
따라서 replace 함수가 필요할 때만, 즉 교체가 필요한 "and"가있을 때만 호출하는 if 문을 삽입했습니다.

도움을 주신 모든 분들께 감사드립니다.

Answer 2

나는 당신이 당신의 replace 호출은 다음과 같이 할 생각 그래서 '모래'와 비슷한 단어는 '와'는 '일치하지 않습니다, 오직'과 '는 그것의 것입니다.

편집 : 나는이 의견을 바탕으로 놀았으며, this 작업 예제가 필요하다고 생각합니다.

는 onBlur으로 onKeyUp 이벤트를 바꾸기 : 사용자가 텍스트 상자를 떠나면 validate 기능은 실행

<textarea type="text" name="q" id="search" spellcheck="false" onblur='Validate();'></textarea></body> 

그래야. 또한 onSubmit으로 실행할 수도 있습니다.

가

replace(/\band\b\s?/ig,"AND \n") 

이 이렇게 입력 발생 :

sand and clay and water 

이 경우에 변형 될

는 또한 정규식에 글로벌 스위치 ( g) 및 선택적 후행 공백 ( \s?)을 첨가 텍스트 상자를 그대로 두십시오.

sand AND 
clay AND 
water 

ould는 아마도 더 많은 경우에 대해 이것을 테스트합니다.

Answer 3

는 다음 replace() 문을 사용하려고이 이후

replace(/\band(?!$)/ig, "And\n") 

는 당신이 "와"줄 바꿈 뒤에 있지 않은지 확인해야 변경된 문자열에 대해 반복적으로 호출되고있다.

function onkeyup() { 
    var str = this; 
    return this.replace(/\band(?!$)/ig, "And\n"); 
}; 

var expected = "this is some sample text And\n is separated by more text And\n stuff"; 
var text = "this is some sample text and is separated by more text and stuff"; 
var input = ""; 
var output = ""; 

for(var i = 0, len = text.length; i < len; i++) { 
    input += text.substr(i,1); 
    output = onkeyup.call(input); 
} 

var result = expected == output; 
alert(result); 
if(!result) { 
    alert("expected: " + expected); 
    alert("actual: " + output); 
} 

당신이 여기를 테스트 할 수 있습니다 :

Answer 4

http://bit.ly/8kWLtr 내가 여기 실제 대답은 혼합 생각

예 (의 문자를 입력하는 사용자를 시뮬레이션 루프와 함수를 사용) 앞의 두 :

onkeyup="this.value = this.value.replace(/\band\b/ig, ' AND\n')" 

당신은 i 검색의 경우를 구분해야하고 g 당신이 REPLAC 확인 모든 발생. 이것은 이전의 경기를 대체 할 것이기 때문에 그다지 효율적이지는 않지만 작동 할 것입니다. 사용자가 항상 심지어 파이어 폭스와 크롬에서 끝으로 이동합니다 caret를 입력하는 동안 텍스트 영역의 내용을 변경하는 경우

function validate() { 
    document.getElementById('search') = document.getElementById('search').replace(/\band\b/ig, ' AND\n'); 
} 

Answer 5

:

그것을 별도의 기능을 확인하십시오. 이미 작성한 것을 편집하려고하면 이해할 수 있습니다. 캐럿을 사용자가 원하는 정확한 위치로 옮겨야합니다. 이는 텍스트 선택을 감지해야 함을 의미합니다. 선택한 텍스트가 선택되었을 때 타이핑하는 것은 표준 동작입니다.

일부 sample code을 찾을 수 있습니다. doGetCaretPosition(), setCaretPosition() 함수를 사용할 수 있습니다.

Answer 6

IE와 FireFox 모두에서 실행되는 JS 코드를 작성해야합니다. 내가 시도

var s = document.getElementbyId('Search'); 
s.value = s.value.replace('and', 'AND \n');