Замена нескольких экземпляров слов на .replace

0

Я пытаюсь упростить преобразование чит-кодов в формат HTML, используя пользовательский ввод и JS.

Например, следующий код должен преобразовывать 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>
Теги:

3 ответа

2
Лучший ответ

используйте regex (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>
Поделиться
  • 0
    Это то, что я собирался опубликовать. Единственная проблема - «х» заменяется на «крест». Надеюсь, они захотят изменить таблицу стилей вместо того, чтобы сделать ее безобразной. Кроме того, вы используете модификатор i , хотя вы использовали .toLowerCase() .
1

Проблема состоит в том, что регулярное выражение по умолчанию учитывает регистр, а ваш ввод - в шапках, а соответствующие строки - в нижнем регистре. Просто добавьте i в свои варианты соответствия, и он будет работать, как ожидалось.

Я также хотел бы отметить, что много ненужных переменных: вам не нужно создавать новую переменную для каждой замены. Кроме того, вам даже не нужно иметь несколько переменных. Вы можете просто .replace вызовы .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/

Редактирование: мне нравятся ответы Патрика и Янна86: он решает проблему и делает решение намного более СУХОЙ.

Поделиться
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);

  }

});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню