CODEWITHSUNDEEP
javascriptnode.jsarraysreactjsregex
Karan Kumar
Karan Kumar

Reputation: 3186

How can I remove occurrences with random hash?

I have a controlled <input /> in my React application where the user would type.

I want to keep track on it and replace the occurrences of $.text and $.lang to random hashes/number.

from

let string = 'I may have multiple $.text and $.lang like $.textand$.lang';

I want all occurrences of $.text and $.lang to have a random number(or anything unique):

to

updatedString = 'I may have multiple 123 and 245 like 744and111';

What I have done so far

let temp = value.split('').reverse().join(''); // reverse it to find the latest occurrence 
      let reText = /txet.\$/i; 
      let reLang = /gnal.\$/i;
      let updated;
      if (value.includes('$.text')) {
        updated = temp.replace(reText, `${hash}#`); // replace the latest occurrence
      } else {
        updated = temp.replace(reLang, `${hash}#`); // replace the latest occurrence
      }
      updatedValue = updated.split('').reverse().join(''); // re reverse it

The issue is it replaces the but onChange RESETS the input state and it only changes the last occurrence of it.

Upvotes: 0

Views: 102

Answers (3)

Jax297
Jax297

Reputation: 657

function myFunction() {
    var theString = "How are $.you doing $.you today?";
    var splitString = theString.split("$.you");
    var joinedString = "";
    for(index = 0; index < splitString.length-1; index++){
        joinedString += splitString[index] + Math.random();
    }
    document.getElementById("demo").innerHTML = joinedString;
}

Something simple like this could probably do the job. So spliting the string into an array of strings and then joining it back with a specific string. Not React specifically, but the idea is there.

Upvotes: 0

MonkeyZeus
MonkeyZeus

Reputation: 20747

You can make use of .replace()'s acceptance of a function for custom and dynamic substitution:

function myHashFunction(match)
{
    // Uncomment this line to see the various matches coming through
    //console.log(match);
    
    // I'm just returning a random number, you need to change this to your hash algorithm
    return Math.floor(Math.random() * Math.floor(999999999999));
}

let str = `I may have multiple $.text and $.lang like $.textand$.lang`;

console.log(str.replace(/\$\.(?:text|lang)/g, myHashFunction));

Upvotes: 0

Deepak Sharma
Deepak Sharma

Reputation: 4170

So im doing it on click. So lets say user type something and then clicking on Replace Template button will replace the $.text and $.lang by some random number. You can insert your specific hash or number if needed.

const replaceTemplateByRandom = (val, temp) => {
  while(val.indexOf(temp) != -1){
      const numb = Math.floor(Math.random()*1000);
      val = val.replace(temp, numb);
  }
  return val;
}

inside this arrow function I'm running the while loop till we find the template to replace, and replace occurrence by random number.

const replaceTemplateByRandom = (val, temp) => {
  while(val.indexOf(temp) != -1){
      const numb = Math.floor(Math.random()*1000);
      val = val.replace(temp, numb);
  }
  return val;
}
function App(props){
  const [val, setVal] = React.useState('default text is $.text, and language is $.lang.');
  const updateVal = (e) => {
    const newVal = e.target.value;
    setVal(newVal);
  }
  
  const replaceTemplate = ()=>{
    let currentVal = val;
    currentVal = replaceTemplateByRandom(currentVal, '$.text');
    currentVal = replaceTemplateByRandom(currentVal, '$.lang');
    setVal(currentVal);
  }
  
  return <div>    
    <input type="text" value={val} onChange={updateVal} style={{"width":"100%"}}/>
    
    <button onClick={replaceTemplate}>Replace Template</button>
  </div>;
}

ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Upvotes: 1

Related Questions