使用.replace代替多個word實例

我想通過使用用戶輸入和JS將作弊代碼轉換成HTML格式更容易。使用.replace代替多個word實例

例如，下面的代碼應R1，R1，圓，R2，左，右，左，右，左，轉換RIGHT到

<div class="ps3 r1"></div>   
<div class="ps3 r1"></div>   
<div class="ps3 circle"></div>   
<div class="ps3 r2"></div>   
<div class="ps3 left"></div>   
<div class="ps3 right"></div> 
<div class="ps3 left"></div>   
<div class="ps3 right"></div> 
<div class="ps3 left"></div>   
<div class="ps3 right"></div>

但返回輸入替換逗號，而不是按鈕組合。任何其他方法/幫助將不勝感激！控制檯是空的，沒有錯誤出現。

$('.submit').click(function() { 
    var raw = $('#raw').val();     
    var st1 = raw.replace(/,/g , "");  
    var st2 = st1.replace(/l1/g , "<div class='ps3 l1'></div>");  
    var st3 = st2.replace(/l2/g , "<div class='ps3 l2'></div>");  
    var st4 = st3.replace(/square/g , "<div class='ps3 square'></div>");  
    var st5 = st4.replace(/circle/g , "<div class='ps3 circle'></div>");  
    var st6 = st5.replace(/triangle/g , "<div class='ps3 triangle'></div>");  
    var st7 = st6.replace(/x/g , "<div class='ps3 cross'></div>");  
    var st8 = st7.replace(/r1/g , "<div class='ps3 r1'></div>");  
    var st9 = st8.replace(/r2/g , "<div class='ps3 r2'></div>");  
    var st10 = st9.replace(/right/g , "<div class='ps3 right'></div>");  
    var st11 = st10.replace(/left/g , "<div class='ps3 left'></div>");  

    $('.result').html(st11); 
});

HTML

<input id="raw" type="text"> 
<button class="submit">Generate</button> 
<div class="result"></div>

來源

2013-09-22 JoshMc

你說你正在更換'R1'，而你正在更換'r1'？考慮區分大小寫。 –

代碼首先將輸入變爲小寫，然後刪除逗號，然後用相應的替換替換任何單詞e html。你可以鏈接這些每個結果在一個新的字符串。

var raw = "R1, R1, CIRCLE, R2, LEFT, RIGHT, LEFT, RIGHT, LEFT"; 
var html = raw.toLowerCase(). 
       replace(/,/g,""). 
       replace(/(l1|l2|square|circle|triangle|x|r1|r2|right|left)/ig,"<div class='ps3 $1'></div>");

html將舉行（這是格式化的，實際的代碼都將是內聯，而不是它使得太大的區別）

<div class='ps3 r1'></div> 
<div class='ps3 r1'></div> 
<div class='ps3 circle'></div> 
<div class='ps3 r2'></div> 
<div class='ps3 left'></div> 
<div class='ps3 right'></div> 
<div class='ps3 left'></div> 
<div class='ps3 right'></div> 
<div class='ps3 left'></div>

來源

2013-09-22 18:02:44

這就是我即將發佈的內容。唯一的問題是「x」被替換爲「cross」。希望他們願意讓樣式表發生變化，而不是讓它變得醜陋。此外，即使您使用了'.toLowerCase（）'，也使用'i'修飾符。 –

$('.submit').click(function() { 

    var raw = $('#raw').val().split(",");     

    for(var i = 0 ; i < raw.length ; i++){ 

    var $div = $("<div class='ps3'></div>"); 
    $div.addClass(raw[i].toLowerCase()); 
    $('.result').append($div); 

    } 

});

來源

2013-09-22 18:02:54 Yann86

的問題是，正則表達式不區分大小寫的匹配默認情況下，您的輸入全部大寫，並且您的匹配字符串是小寫字母。只需附加i到您的比賽選項，它將按預期工作。

我也會注意到這是很多不必要的變量：你不需要爲每個替換創建一個新變量。此外，你甚至不需要有多個變量。你可以只鏈.replace電話：

$('.submit').click(function(evt) { 
    evt.preventDefault(); 
    var raw = $('#raw').val();     
    var st = raw.replace(/,/g , "")  
     .replace(/l1/ig , "<div class='ps3 l1'>l1</div>")  
     .replace(/l2/ig , "<div class='ps3 l2'>l2</div>") 
     .replace(/square/ig , "<div class='ps3 square'>square</div>")  
     .replace(/circle/ig , "<div class='ps3 circle'>circle</div>") 
     .replace(/triangle/ig , "<div class='ps3 triangle'>triangle</div>")  
     .replace(/x/ig , "<div class='ps3 cross'>cross</div>")  
     .replace(/r1/ig , "<div class='ps3 r1'>r1</div>")  
     .replace(/r2/ig , "<div class='ps3 r2'>r2</div>")  
     .replace(/right/ig , "<div class='ps3 right'>right</div>") 
     .replace(/left/ig , "<div class='ps3 left'>left</div>");  

    $('.result').html(st); 
});

即使這似乎是太多重複的代碼給我，但它是一個開始....

這是在行動：

http://jsfiddle.net/xQ6pF/

編輯：我喜歡帕特里克和Yann86的回答：它削減了問題的追逐，使解決方案更加乾爽。

來源

2013-09-22 18:04:59

使用.replace代替多個word實例

回答

相關問題