Change specific instances of a string based on the chosen index in JavaScript

Question

Change specific instances of a string based on the chosen index in JavaScript

Looking for a solution to fix a bug in my self-made autocomplete feature. Consider this scenario where I need to autocomplete the final word in an incomplete sentence:

let text = 'Hello there, I am her'

My current method involves the user pressing ctrl + enter to autocomplete with a suggested word displayed on the page. Let's assume the suggestion here is 'here'. Additionally, my controller tracks the insertion cursor position (index).

If I use the replace function like so:

text.replace(word, suggestion);

(In this case, 'word' is 'her' and 'suggestion' is 'here'), it will replace the first occurrence of 'her'. The challenge lies in replacing a specific index within the text string as there can be multiple instances of the word throughout. Is there a more efficient way to achieve this rather than using cumbersome if conditions?

(For context, I am implementing this functionality with Angular keydown/keyup events)

EDIT>>>>> This query differs from the linked question since the problem at hand involves supporting users who may revisit previous sections of their sentence to autocomplete a new word.

javascript angularjs keydown

Answer 1

Answer №1

Let's say you have a specific position within a string and need to replace a certain number of characters (representing an incomplete word). Would the following code be effective in achieving this task?

let words = 'appl and appl and appl'

function swapLetters(str, position, length, replacement) {
    return str.slice(0, position) + replacement + str.slice(position + length);
}

console.log(swapLetters(words, 0, 4, 'apple'))
console.log(swapLetters(words, 9, 4, 'apple'))

Answer 2

Let's say you have a specific position within a string and need to replace a certain number of characters (representing an incomplete word). Would the following code be effective in achieving this task?

let words = 'appl and appl and appl'

function swapLetters(str, position, length, replacement) {
    return str.slice(0, position) + replacement + str.slice(position + length);
}

console.log(swapLetters(words, 0, 4, 'apple'))
console.log(swapLetters(words, 9, 4, 'apple'))

Answer 3

Answer №2

Starting you off with a helpful direction.

const phrase = 'Hey let\'s swap all instances of hey with Hi';
const parts = phrase.split(' ');
for (let j = 0; j < parts.length; j++){
 if(parts[j].toLowerCase() === 'hey')
   parts[j] = 'Hi'
}
const newPhrase = parts.join(' ');
console.log(newPhrase); //"Hi let's swap all instances of Hi with Hi"

Answer 4

Starting you off with a helpful direction.

const phrase = 'Hey let\'s swap all instances of hey with Hi';
const parts = phrase.split(' ');
for (let j = 0; j < parts.length; j++){
 if(parts[j].toLowerCase() === 'hey')
   parts[j] = 'Hi'
}
const newPhrase = parts.join(' ');
console.log(newPhrase); //"Hi let's swap all instances of Hi with Hi"

Change specific instances of a string based on the chosen index in JavaScript

Answer №1

Answer №2

Similar questions

The innerHTML function is providing plain text instead of HTML content

Having trouble accessing the $scope variable in Ionic 1/Angular

Local variable reference getting lost in a loop during a jQuery Ajax call

Combining selected options from an AngularJS dropdown menu

Encountering a Restangular error: "The 'then' function is not recognized" while attempting to resolve a promise

Error message: "Uncaught TypeError in NextJS caused by issues with UseStates and Array

Verify if items in a list contain a source from a variable and then execute code - jQuery / JavaScript

Refreshing web pages using AJAX

How to convert an array of keys and an array of values into an array of objects using JavaScript

The error message "Node.js is throwing a next() error that is not a

Incapable of composing text using the MUI SearchBar

Setting the default tab in easyTabs to be all-powerful

Utilize Next.js with Axios for making an HTTP request to a Laravel Lumen endpoint, then showcase the retrieved data within the Next.js

Ways to display the modal once the user initiates the action

Reasons Why Vue Component Does Not Update When Select Changes

Preflight request rejection due to access control check failure in React and Express

Using Firebase Realtime Database, this React dropdown menu is populated with options in real-time. Combining the features

The x-axis in c3.js is experiencing issues with plotting when there is interval data in DST time

Enhance your coding experience with Firebase Autocomplete on VScode

Breaking up ui-router state definitions into separate modules