替换字符串jquery中的所有字符

Question

如何使用replaceAll() 函数将给定字符串中的所有字符替换为*？

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>

我宁愿不走正则表达式路线，但我猜我可能不得不这样做。

---

我正在编写一个简单的 hangman 程序来隐藏带有* 字符的字符串。然后用户输入一个字符，如果正确，则字符串中的字符将重置回其原始字符。

正则表达式非常适合这样的东西，我只是不太熟悉它。

Answer 1

如果您不想使用正则表达式，可以使用split() 将字符串转换为数组，然后使用map() 根据条件修改每个元素。

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'] ))

Answer 2

这是实现你想要的一种方式

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>

Answer 3

我不知道表单在做什么，也不知道您如何填充words。我提到这一点的原因是，如果数组是通过 javascript 函数或 jquery 对象填充的，则数组中可能有很多不需要的条目。您可能需要更改以下代码以忽略那些不需要的条目。

这段代码所做的是循环遍历words 数组并替换每个字符（正则表达式/./g）并用星号替换它（*）。

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>