替换数组中多个字符串上的单词

时间:2018-05-30 22:28:16

标签: javascript arrays string random

我试图弄清楚如何在一个数组中用多个字符串中的随机数替换数字/字母排列的实例,同时还在每次点击时随机生成其中一个字符串。

基本上,我想在点击时从我的阵列中随机生成我的一个字符串,并替换' 6a'随机数。

我已经能够为每次点击生成一个随机字符串,如果我删除了数组中的所有其他字符串,我就可以替换字符串中的数字,但我无法使所有内容都能正常工作一起。这是我的代码到目前为止的样子!

提前感谢您的帮助!



//strings that I want to generate and change

var events = ['String one 6a',
  
'String two 6a',

'String three 6a',

'String four 6a',

'String five 6a',

];

//function click generating new random string

function newEvent() {
  var randomNumber = Math.floor(Math.random() * (events.length));
  var b = randomNumber;
  document.getElementById("thing").innerHTML = events[b];
};

//attempt to change part of a string to a random number

function numChange() {
  for (var i = 0; i < events.length; i++) {
      events[i] = events[i].replace('6a', function(match) {
        Math.floor(Math.random() * 7);
      } );
  };
} 
&#13;
<body>
  <div id="thing">
    <p>
      We're replacing this thing
    </p>
  </div>
  <button onclick="newEvent()">
    Click me
  </button>
</body>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:0)

如果您使用字符串控制数组,请执行此操作。

var events = [
  'String one ',
  'String two ',
  'String three ',
  'String four ',
  'String five '
];

function newEvent() {
  var randomArrayString = Math.floor(Math.random() * (events.length));
  var randomNumber = Math.floor(Math.random() * 10)
  document.getElementById("thing").innerHTML = events[randomArrayString] + randomNumber;
};
<body>
  <div id="thing">
    <p>
      We're replacing this thing
    </p>
  </div>
  <button onclick="newEvent()">
    Click me
  </button>
</body>

如果您无法控制数组字符串,请使用str.replace()

中的regexp

var events = [
'String one 6a',
  'String two 6a',
  'String three 6a',
  'String four 6a',
  'String five 6a'
];

function newEvent() {
  var randomArrayId = Math.floor(Math.random() * (events.length));
  var randomNumber = Math.floor(Math.random() * 10)
  document.getElementById("thing").innerHTML = events[randomArrayId].replace(/6a/,randomNumber);
};
<body>
  <div id="thing">
    <p>
      We're replacing this thing
    </p>
  </div>
  <button onclick="newEvent()">
    Click me
  </button>
</body>

答案 1 :(得分:0)

这是一个简洁明了的解决方案:

let events = ['String one 6a',
  
'String two 6a',

'String three 6a',

'String four 6a',

'String five 6a',

];

function numChange() { 
  events = events.map(event => event.replace('6a', Math.floor(Math.random() * 7)));
};

function newEvent() {
  let randomNumber = Math.floor(Math.random() * (events.length));
  document.getElementById("thing").innerHTML = events[randomNumber]
};

//execute once to replace '6a' with a random number
numChange();
<body>
  <div id="thing">
    <p>
      We're replacing this thing
    </p>
  </div>
  <button onclick="newEvent()">
    Click me
  </button>
</body>

答案 2 :(得分:-1)

应该像:

&#13;
&#13;
//<![CDATA[
/* external.js */
var doc, bod, htm, M, I, S, Q, old = onload; // for use on other loads
onload = function(){
if(old)old(); // change old var name if using technique on other pages
doc = document; bod = doc.body; htm = doc.documentElement;
M = function(tag){
  return doc.createElement(tag);
}
I = function(id){
  return doc.getElementById(id);
}
S = function(selector, within){
  var w = within || doc;
  return w.querySelector(selector);
}
Q = function(selector, within){
  var w = within || doc;
  return w.querySelectorAll(selector);
}
var events = ['String one 6a', 'String two 6a', 'String three 6a', 'String four 6a', 'String five 6a'];
I('f').onsubmit = function(){
  return false;
}
function randEventRep(){
  return events[Math.floor(Math.random()*events.length)].replace(/\b6a\b/g, Math.floor(Math.random()*7));
}
var press = I('press'), thing = I('thing');
press.onclick = function(){
  thing.innerHTML = randEventRep();
}
} // end load
//]]>
&#13;
/* external.css */
html,body{
  padding:0; margin:0;
}
body{
  background:#000; overflow-y:scroll;
}
.main{
  width:940px; background:#ccc; padding:20px; margin:0 auto;
}
&#13;
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <form id='f' name='f'>
      <p id='thing'>This is the thing we&apos;re changing</p>
      <input id='press' type='button' value='Click Me' />
    </form>
  </div>
</body>
</html>
&#13;
&#13;
&#13;