Как создать на javascript систему найти/заменить

268

01 апреля 2017, 00:47

Помогите! Нужно создать два поля и кнопки для каждого из них, чтобы они с помощью скрипта в textarea находился введенный текст в первом на введенный текст во втором инпуте. Точнее, как можно разделить чтобы не одной только клавишей замены, а как я мельком недавно нашел что-то типа цветной подсветки введенного/найденного в textarea по нажатию на кнопку поиска, а потом, по принципу замены по нажатию на отдельную "Заменить".

Answer 1

Без jQuery можно реализовать следующим образом:

function replaceText(){ 
  var find = document.getElementById('find').value; // текст из `Найти` 
  var replace = document.getElementById('replace').value; // текст из `Заменить` 
  var elem = document.getElementById('myText'); // элемент textarea  
 
  // заменим содержимое элемента с использованием регулярки и функции replace 
  elem.textContent = elem.textContent.replace(new RegExp(find, 'g'), replace); 
}

<textarea id="myText" cols="30" rows="3">Hello world! Hello men!</textarea></br> 
<input type="text" id="find" placeholder="Найти"><br/> 
<input type="text" id="replace" placeholder="Заменить"><br/> 
<button onclick="replaceText();">Заменить</button>

Вроде бы все просто. По замене всех совпадений в тексте вот хороший пример: How to replace all occurrences of a string in JavaScript?

Метод replace() возвращает новую строку с некоторыми или всеми сопоставлениями с шаблоном, заменёнными на заменитель. Шаблон может быть строкой или регулярным выражением, а заменитель может быть строкой или функцией, вызываемой при каждом сопоставлении.

Answer 2

Как то так:

$(document).ready(function(){ 
$('#act').on('click', function(e){ 
e.preventDefault(); 
 
var find = $('#find').val(); 
var re = new RegExp(find, 'g') 
var replace = $('#replace').val(); 
 
$('#target').val($('#target').val().replace(re,replace)); 
}) 
 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
<input type="text" id="find" placeholder="find"> 
<input type="text" id="replace" placeholder="replace"> 
<textarea id="target">Lorem imsum bla bla</textarea> 
<button id="act">Replace</button> 
</form>