0

我正在尝试通过使用用户输入和 JS 来更轻松地将作弊码转换为 HTML 格式。

例如，以下代码应将 R1、R1、CIRCLE、R2、LEFT、RIGHT、LEFT、RIGHT、LEFT、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>

但返回替换逗号的输入，而不是按钮组合。任何其他方法/帮助将不胜感激！控制台为空，没有出现错误。

JS

$('.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>
4

3 回答 3

2

使用正则表达式(l1|l2|square|circle|triangle|x|r1|r2|right|left)，它将查找其中任何一个并替换它们，$1第二个参数中的将被替换为匹配的任何一个

代码首先将输入变为小写，然后删除逗号，然后用相应的 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-22T18:02:44.143 回答
1

问题是正则表达式默认进行区分大小写的匹配，并且您的输入全部大写，并且您的匹配字符串是小写的。只需附加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-22T18:04:59.123 回答
0 
$('.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-22T18:02:54.857 回答