텍스트 상자에 특정 문자열이 포함 된 경우 일부 기능 - javascript

Question

큰 텍스트 상자 (200 단어 포함)에서 특정 문자열을 검색하여 색상을 지정할 수있는 기능이 궁금합니다. 전의. 텍스트 상자에는 "내 개가 행복하다"라는 문장이 있고 나는 문자열 "개"가 버튼이나 sth로 빨갛게되기를 바란다. 그것은 가능합니까 ???

Answer 1

예, 가능합니다. 그러나 텍스트 상자 나 텍스트 영역을 사용하지 않는, 사용하십시오 divcontenteditable = "true"와 :

.editable { 
    padding: 5px; 
    border: dashed 1px black; 
} 
.redText { 
    color: red; 
} 

JSFiddle : 스타일 시트에

<div id="editableDiv" class="editable" contenteditable="true"> 
    This is a sentence containing 'dog'.<br /> 
    You can edit the contents of this div. 
</div> 
<button id="highlightBtn">Highlight "dog"</button> 
<script type="text/javascript"> 
    highlightBtn.onclick = function() { 
     var elem = document.getElementById('editableDiv'); 
     elem.innerHTML = elem.innerHTML.replace(/dog/g, 
          '<span class="redText">dog</span>'); 
    } 
</script> 

그리고 클래스 redText를 작성하는 것을 잊지 마세요 및 editable : http://jsfiddle.net/ProgramFOX/UMMPh/