Если текстовое поле содержит определенную строку, сделайте некоторую функцию - JavaScript

Мне интересно, как искать конкретную строку в большом текстовом поле (которое содержит 200 слов), чтобы я мог сделать функцию, чтобы покрасить их. Ex. В текстовом поле есть предложение "моя собака счастлива", и я хочу, чтобы строка "собака" стала красной от кнопки или чего-то еще. Является ли это возможным???

1 ответ

Решение

Да, это возможно. Но не используйте текстовое поле или текстовую область, используйте div с contenteditable = "true":

<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 в вашей таблице стилей:

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

JSFiddle: http://jsfiddle.net/ProgramFOX/UMMPh/

Другие вопросы по тегам