CODEWITHSUNDEEP
javascriptjquery
Master Yoda
Master Yoda

Reputation: 4412

Replace all characters in a string jquery

How can I replace all characters in a given string with * using the replaceAll() function?

var words = ['marvel','computer','regex','throne'];
var rand = words[Math.floor(Math.random() * words.length)];
//should replace all characters in the string with *
$('#value').text(rand).replaceAll(rand,'*');
.container{
   border: 1px solid black;
   padding: 5px;
   margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <input type='text' />
  <span id='value'></span>
  <hr />
  <button type='button' id='submit'>Submit</button>
</div>

Id rather not go down the regex route but Im guessing I may have to.

Im writing a simple hangman program for fun that hides the string with * characters. The user then enters a character and if correct the character in the string is reset back to its original.

regex is great for stuff like this, im just not that familiar with it.

Upvotes: 1

Views: 1214

Answers (3)

Nenad Vracar
Nenad Vracar

Reputation: 122047

If you don't want to use regex you could use split() to transform string to array and then map() to modify each element based on condition.

let replaceAll = (str, chars = []) => {
  return str.split('')
  .map(c => c.trim() && !chars.includes(c) ? '*' : c)
  .join('');
}
  
console.log(replaceAll('lorem ipsum', ['l', 'm']))
console.log(replaceAll('123    lorem ips', ['2', 'i'] ))

Upvotes: 2

3Dos
3Dos

Reputation: 3487

This is one way to achieve what you want

var words = ['marvel','computer','regex','throne'];
var rand = words[Math.floor(Math.random() * words.length)];
//should replace all characters in the string with *
var maskedRand = ''
for (var char in rand) {
  maskedRand += '*'
}
$('#value').text(maskedRand);
.container{
   border: 1px solid black;
   padding: 5px;
   margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <input type='text' />
  <span id='value'></span>
  <hr />
  <button type='button' id='submit'>Submit</button>
</div>

Upvotes: 1

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14862

I don't know what the form is doing, or how you're populating words. The reason I mention this, is if the array is being populated via a javascript function or jquery object, there may be a LOT of unwanted entries in the array. You may want to alter the below code to ignore those unwanted entries.

What this code is doing is looping through the words array and replacing each character (regex /./g) and replacing it with an asterisk (*).

var words = ['marvel','computer','regex','throne'];
var rand = words[Math.floor(Math.random() * words.length)];
//should replace all characters in the string with *
for(var i in words) {
    words[i] = words[i].replace(/./g, '*');
}
console.log(words);
.container{
   border: 1px solid black;
   padding: 5px;
   margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <input type='text' />
  <span id='value'></span>
  <hr />
  <button type='button' id='submit'>Submit</button>
</div>

Upvotes: 0

Related Questions