如何通過jQuery隨機{1 | 2 | 3 | 4}？

Question

<div class="xxx">Number is {1|2|3|4}, and {one|two|three|four}</div> 

<div class="yyy"></div> 

...

var data = $(".xxx").text(); 

$(".yyy").html(data); 

http://jsfiddle.net/tQeCv/

我只需要這個輸入：

號爲{1 | 2 | 3 | 4}和{一個|二|三| four}

和隨機喜歡這個 輸出：

號是3，和四個

我不知道該怎麼辦...對不起:(

Answer 1

這不是JSON。我假設你想隨機分割1,2,3和4個元素。您必須將數據分割到|上字符，然後隨機排列你的結果（或者編寫你自己的shuffle算法）。

var data = $(".xxx").text(); // initial data 

var results = data.split("|"); // split on the "|" and store into results 

然後，您就一定得從數組中隨機元素：

var randomNumber = Math.floor((Math.random()*4)+1); // random number (no more than 4 or the array will be out of bounds) 

隨機播放/顯示數據：

var firstElement = results[randomNumber]; 
randomNumber = Math.floor((Math.random()*4)+1); 
var secondElement = results[randomNumber]; 

等等....

Answer 2

可以使用Math對象.random()方法：

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math/random

function randomNumber() 
{ 
    num = Math.ceil(Math.random() * (1 - 4) + 4); 
    $(".yyy").text(num) 
} 

Answer 3

嘗試一些簡單的開始，如理解分裂（）等。

這裏的東西：

var data = $(".xxx").text(), 
    numbs = data.split('{')[1].split('}')[0].split('|'), 
    words = data.split('{')[2].split('}')[0].split('|'), 
    newdata = data.split('{')[0]+' '+numbs[Math.floor(Math.random()*numbs.length)]; 
    newdata += data.split('}')[1].split('{')[0]+' '+words[Math.floor(Math.random()*words.length)]; 

$(".yyy").html(newdata); 

​ 

FIDDLE

然後移動到使用正則表達式替換。

編輯：

爲了使它更有活力，並與更多的佔位符的工作，你可以做這樣的事情一點點正則表達式使用：

var data = $(".xxx").text(), 
    placeholder = data.match(/{(.*?)}/gi); 

$.each(placeholder, function(i,e) { 
    var options = e.split('|'), 
     randOpt = options[Math.floor(Math.random()*options.length)]; 
    data = data.replace(e, randOpt.replace(/({|})/g, '')); 
}); 

$(".yyy").html(data); 

FIDDLE