如何创建 javascript 句子（或段落）生成器？答案

【问题标题】：How to create a javascript sentence (or paragraph) generator?如何创建 javascript 句子（或段落）生成器？
【发布时间】：2013-10-15 05:02:06
【问题描述】：

如何构建 javascript 句子（或段落）生成器？

我已经构建了一个生成器，当您单击一个按钮时，它会一次生成一个报价。引用显示在 2 个框内的文本区域内。

但我的问题是它一次只能显示一个报价。我希望能够将一堆半短语混合在一起组成一个段落。

（即）

|汽车是蓝色的。 |汽车 |很快。 |

另一个结果是：

|汽车|是绿色的。 |汽车 |很快。|

“|”之间的内容是不同的结果。

附：我还希望所有内容都在一个文本区域中并通过单击生成。我已经完成了一些编码。我想改变它以使段落生成器成为可能。

原始代码：

CSS

<style>
div#box{
height : 330px;
width : 450px;
background-color : teal;
border : 1px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius : 10px;
border-bottom-right-radius: 10px;
margin : 0px auto;}

 div#box2{
 height : 300px;
 width : 430px;
 background-color : brown;
 border : 1px solid black;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 border-bottom-left-radius : 10px;
 border-bottom-right-radius: 10px;
 margin : 0px auto;
 margin-top: 15px;} 

div#boxTitle{
height : 60px;
width : 390px;
background-color : olive;
color : teal;
font-family : times new roman;
font-size : 15pt;
letter-spacing : 1px;
border : 1px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius : 10px;
border-bottom-right-radius: 10px;
text-decoration : bold;
text-transform : uppercase;
text-align : center;
margin : 0px auto;
margin-top : 13px;}


textarea{
height : 200px;
width : 390px;
background-color : olive;
color : black;
font-family : arial new, cursive, serif;
font-size : 11pt;
letter-spacing : 3px;
border : 1px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius : 10px;
border-bottom-right-radius: 10px;
text-decoration : italic;
text-align : center;
margin-left : 5%;
margin-right : 5%;
margin-top : 20px;} 

.button{
height : 40px;
width : 175px;
background-color : teal;
color : #bbb;
font-family : arial new;
font-size : 12pt;
border : 1px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius : 10px;
border-bottom-right-radius:     10px;
text-decoration : bold;
text-align : center;
margin-left: 50%;}
</style>

Javascript

 <script type="text/javascript"> 
 var Quotes = new Array(); 

 Quotes[0]="your first quote.";
 Quotes[1]="your second quote. "; 
 Quotes[2]="your third quote.  "; 


function getQuote(){ var seed      = Math.floor(Math.random() * 
Quotes.length); return     Quotes[seed]; } 

 </script>

HTML

  <div id="box">
 <div id="box2">
 <div      id="boxTitle"><br>generator      title</div>
 <textarea id="quoteBody"></textarea>
 </div></div>

  <br><br>
  <input type="button"    class="button" value="Get a   new quote"    onclick="document.   getElementById('quoteBody').  innerHTML = getQuote();" />

【问题讨论】：

修改函数，以便将数组传递给它以从中获取短语。为每个数组调用一次，连接结果。

标签： javascript html generator paragraph sentence

【解决方案1】：

可能是这样的

<script type="text/javascript"> 
 var nouns = ["car","horse","apple","person","chimp"];
 var adjectives = ["red","fast","lonely","hungry","insane"];

function getQuote(){ 
var randomNounIndex      = Math.floor(Math.random() * nouns.length);
var randomAdjectiveIndex = Math.floor(Math.random() * adjectives.length);
var retVal="The "+nouns[randomNounIndex]+" is "+adjectives[randomAdjectiveIndex]+".";
return retVal;
} 
</script>

一旦你有了想法，你可以修改它以返回包含更多单词、词性等的各种复杂句子。

【讨论】：

【解决方案2】：

您可以尝试以下通用方法：

// Return a random element of an array
function getRandomElement(arr) {
  return arr[Math.random() * arr.length | 0];
}

// Return a string of elements chosen randomly from a sequence of arrays
function genPhrase() {
  var phrases = [
     ['Huge','Extraordinary','Average','Amazing'],
     ['Intelligence','Ignorance','Mediocraty','Courage', 'Cowardice']
  ];
  var phrase = [];
  phrases.forEach(function(a) {phrase.push(getRandomElement(a));});
  return phrase.join(' ');
}

// Just for play..   
for (var i=5; i; i--) {
  document.write(genPhrase() + '<br>');
}

请注意，forEach 需要 ES5 支持。如果需要，用 for 循环替换很简单。

【讨论】：