JQuery input change only specifc word

Question

I have an input on my HTML code, I want to change only a specific word in this input.

<input type="text" value="Input that I want to change only **this** word" id="inpWord">

when I keypress on this input, only change the word this, when I type/erease other word blocks me.

how can i do this on Jquery?

Use a `regexp` and `.replace()` – empiric Feb 02 '17 at 16:55 — empiric, Feb 02 '17 at 16:55

score 1 · Answer 1 · edited May 23 '17 at 12:09

I would suggest adding an event listener for the input event, which is fired synchronously when the value is changed (including when you paste a value in). If you want to strip out any optional whitespace around the desired word(s), you can replace /\s*this\s*/g with ' '.

var input = document.querySelector('input');

input.addEventListener('input', function(event) {
  this.value = this.value.replace(/\s*this\s*/g, ' ');
});

input { width: 100%; line-height: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" value="Input that I want to change only this word">

However, you will notice that there is an issue. The input caret will jump to the end of the field while you are typing because the entire value of the input element is being updated. To avoid this, you can implement this solution where the initial position of the caret is captured and then updated after the value is replaced:

var input = document.querySelector('input');

input.addEventListener('input', function(event) {
  var target = event.target;
  
  // Capture initial position
  var position = target.selectionStart;

  // This triggers the cursor to move.
  target.value = target.value.replace(/\s*this\s*/g, ' ');

  // Set the cursor back to the initial position.
  target.selectionEnd = position;
});

input { width: 100%; line-height: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" value="Input that I want to change only this word">

Nate Beers · Answer 2 · 2017-02-02T23:00:29.883

0

$('#inpWord').on('keyup',function(){
  str = $(this).val().replace('this','that')
  $(this).val(str)
});

edited Feb 02 '17 at 23:00

answered Feb 02 '17 at 18:09

Nate Beers

1,355
2
13
22

Not much explanation needed. If you are typing in an input and you type the word `'this'` then it changes it to `'that'`. That's what the poster wanted. – Nate Beers Feb 02 '17 at 22:59
then look at the other answers :) – Al-Mothafar Feb 03 '17 at 07:13

score 0 · Answer 3 · answered Feb 02 '17 at 18:57

I would use something like this. It will replace all the instances for you and its case insensitive. It will respond to change, keyup, and paste events. Try it out :-)

$('#replace').on('keyup paste change',function(){
  this.value = this.value.replace(/this/gi,'that');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="replace">

JQuery input change only specifc word

3 Answers3