Question

我正在努力通过使用用户输入和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>

Answer 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>

Answer 2

问题是，正则表达式默认情况下会进行区分大小写的匹配，并且您的输入全部为大写，而您的匹配字符串是小写的。只需将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的答案：它切入问题的追逐并使解决方案更加干燥。

Answer 3

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

  }

});

用.replace替换多个单词实例

3 个答案: