1

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.

Master Yoda
  • 4,334
  • 10
  • 43
  • 77
  • i guess you are correct. [see this answer](https://stackoverflow.com/questions/23325973/jquery-replace-in-html) – ARr0w Nov 27 '17 at 11:20
  • Why not just use regex? It's literally just `/./g `: https://jsfiddle.net/kz1m93d5/ – craig_h Nov 27 '17 at 11:24
  • You could loop through the string and replace each character individually, something like `array[string][counter] = '*';` (since you are storing your strings in an array) – Antoniu Livadariu Nov 27 '17 at 11:26
  • @craig_h 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. – Master Yoda Nov 27 '17 at 11:29
  • @MasterYoda Ah, OK. Then I would just loop over the characters in the word to create the mask: https://jsfiddle.net/qqL9o129/ – craig_h Nov 27 '17 at 11:39
  • @craig_h awesome, looks like its something similar to Nenads answer below. Thanks for the suggestion – Master Yoda Nov 27 '17 at 11:43

3 Answers3

2

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'] ))
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
  • 1
    You're welcome, if for some reason you want to pass numbers in second parameter array and find then in string you then also need to map that number to string like so https://jsfiddle.net/Lg0wyt9u/2520/ – Nenad Vracar Nov 27 '17 at 11:49
1

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>
3Dos
  • 3,210
  • 3
  • 24
  • 37
0

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>
Richard Parnaby-King
  • 14,703
  • 11
  • 69
  • 129
  • Wouldnt it be better to replace the characters in random string that comes from the array rather than every word in the array? – Master Yoda Nov 27 '17 at 11:32