Блог

Главная - Вопросы по программированию - Замена текста при изменении ввода с помощью jQuery

Замена текста при изменении ввода с помощью jQuery

#jquery #forms

#jquery #формы

Вопрос:

Я пытаюсь заменять текст каждый раз, когда у меня происходит изменение ввода.

Вот пример: https://jsfiddle.net/ewdp3Lnr /

 $("[name='replacer']").on('change paste keyup', function() {
    PRO_Content = $('#content').html();
    PRO_Content = PRO_Content.replace('####', $("[name='replacer']").val());
    $('#content').html(PRO_Content);
});

Это работает, но только для первого обнаруженного изменения.

Но не для второго, третьего, …

Не могли бы вы указать мне правильное направление?

Спасибо.

Комментарии:

1. ваше первое значение идет по кругу. здесь — PRO_Content = $('# content').html();

Ответ №1:

Просто получите содержимое перед любым изменением и используйте начальное значение. Не переписывайте начальное значение, потому что это заменит #### 

 var pattern = $('#content').html();
$("[name='replacer']").on('change paste keyup', function() {   
    PRO_Content = pattern.replace('####', $("[name='replacer']").val());
    $('#content').html(PRO_Content);
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Put something here to replace the #### in the HTML code:<br>
<input type="text" name="replacer">

<hr>

<span id="content">
  <p>This man is <strong style="color:red">####</strong>.</p>
</span>

Комментарии:

1. Большое спасибо. И последнее, если у меня есть более одного ‘####’, как я могу продолжить, пожалуйста?

2. @Ross вам нужно использовать replaceAll

3. Например: let i = 0; let changes = ["first", "second"]; '#### something else ####'.replaceAll('####', () =>{ return changes[i ];});

4. Привет @Ross если этот или любой другой ответ решил ваш вопрос, пожалуйста, подумайте о том, чтобы принять его , установив флажок. Это указывает более широкому сообществу, что вы нашли решение, и дает некоторую репутацию как ответчику, так и вам. Нет никаких обязательств делать это.

Ответ №2:

Вы можете упростить свой код, используя .text( функция ).

Более того, вместо событий изменения и ввода вы можете использовать событие ввода.

Фрагмент:

 var element = $('#content :contains("####")').filter((i,e) => e.textContent == '####');
$("[name='replacer']").on('input paste', function(e) {
    element.text(function(idx, text) {
        return e.target.value;
    });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="text" name="replacer">

<hr>

<span id="content">
  <p>This man is <strong style="color:red">####</strong>.</p>
</span>

Комментарии:

1. Привет, это уокинг, но я ищу более настраиваемый способ. На самом деле ваш код слишком сильно основан на структуре HTML, а не на ключе (т. Е.: ####).

2. Обновлен фрагмент @Ross. Теперь я сохраняю элемент, в котором изменяю текстовое содержимое…… В любом случае я не понимаю, зачем использовать замену . Дайте мне знать.

Метки: