Regex, не подходит для соответствия

Question

Я работаю над примером bbcode, но я не могу заставить его работать. regex соответствует всем тегам [img] и делает все это странным. Я пытаюсь иметь возможность щелкнуть изображение и получить его полный размер, и когда я это сделаю, все станет ссылкой (когда у меня есть не один раз img-tag).

Вот мой текст:

[img size="small" clickable="no"]img1.jpg[/img] 
[img size="large" clickable="yes"]img2.jpg[/img] 

Вот мой исходный код:

var bbArray = [/\n/g, 
       /\[img size="(.*?)" clickable="yes"\](.*?)\[\/img\]/g, 
       /\[img size="(.*?)" clickable="no"\](.*?)\[\/img\]/g]; 

var bbReplace = ['<br>', 
       '<a href="'+path+'img/$2" target="_blank"><img src="'+path+'img/$1_$2?'+ new Date().getTime() +'" alt="$2"></a>', 
       '<img src="'+path+'img/$1_$2?'+ new Date().getTime() +'" alt="$2">']; 

Операция:

for (var i = 0; i < content_text_bb.length; i++) { 
      content_text_bb = content_text_bb.replace(bbArray[i], bbReplace[i]); 
     } 

результат:

<img src="localhost/img/small" clickable="no" ]img1.jpg[="" img] 
[img size="large_img2.jpg?1423317485160" alt="img2.jpg">; 

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

Answer 1

Первое первое, ваш цикл должен быть:

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

(не content_text_bb.length)

Во-вторых, проблема у вас есть с этим size="(.*?). Это говорит: соответствие любому контенту не жадно, пока я не найду первую «вещь-вот-следую» (в этом случае вещь-то-следующее - это первое появление " clickable="yes"

Если вы посмотрите на текст ввода, поиск [img size="{ANYTHING}" clickable="yes"] означает, что {НИЧЕГО} является:. small" clickable="no"]img1.jpg[/img][img size="large, и вы можете видеть, как это возвращает результаты, и ломает все

Таким образом, во-первых, следует отметить, что регэкспы являются не лучший инструмент для обработки языка (много сообщений на SO и в Интернете в целом по теме). В этом конкретном случае вы можете исправить свою проблему, будучи очень конкретным в отношении того, что вы хотите согласовать.

НЕ соответствует «ничего». Если вы хотите соответствовать атрибуту размера, найдите только цифры. Если вы хотите сопоставить любое значение свойства, найдите «{ANYTHING_NOT_DOUBLE_QUOTES}». Таким образом, с тем, что, если вы измените bbArray на код ниже, он должен работать в конкретном примере, вы дали нам:

var bbArray = [/\n/g, 
    /\[img size="([^"]*)" clickable="yes"\](.*?)\[\/img\]/g, 
    /\[img size="([^"]*)" clickable="no"\](.*?)\[\/img\]/g]; 

Просто чтобы быть ясно: в то время как это должно работать на текущем входе, то без какой-либо надежной обработки bbcode. Он будет соответствовать только [img] тегам bbcode, которые имеют точно один атрибут size и один атрибут clickable, в этом порядке! Большинство бесплатных bbcode-адресов будут иметь более широкие вариации, и этот код, очевидно, не будет работать на них.

Answer 2

Что-то, что могут вас заинтересовать, Extendible BBCode Parser. Пример использования.

var bbcArr = [ 
 
    '[img size="small" clickable="no"]img1.jpg[/img]', 
 
    '[img size="large" clickable="yes"]img2.jpg[/img]' 
 
]; 
 

 
XBBCODE.addTags({ 
 
    "img": { 
 
    openTag: function(params, content) { 
 
     params = (params.match(/(\S+?=".*?")/g) || []) 
 
     .reduce(function(opts, item) { 
 
      var pair = item.match(/(\S+?)="(.*?)"/); 
 

 
      opts[pair[1]] = pair[2]; 
 

 
      return opts; 
 
     }, {}); 
 

 
     var html = '<img src="http://localhost/img/'; 
 

 
     if (params.clickable === 'yes') { 
 
     html = '<a href="http://localhost/img/' + content + 
 
      '" alt="' + content + '">' + html; 
 
     } 
 

 
     if (params.size === 'small' || params.size === 'large') { 
 
     html += params.size + '/'; 
 
     } 
 

 
     html += content + '" />'; 
 
     if (params.clickable === 'yes') { 
 
     html += '</a>'; 
 
     } 
 

 
     return html; 
 
    }, 
 
    closeTag: function(params, content) { 
 
     return ''; 
 
    }, 
 
    displayContent: false 
 
    } 
 
}); 
 

 
bbcArr.forEach(function(item) { 
 
    var result = XBBCODE.process({ 
 
    text: item, 
 
    removeMisalignedTags: false, 
 
    addInLineBreaks: false 
 
    }); 
 

 
    this.appendChild(document.createTextNode(result.html + '\n')); 
 
}, document.getElementById('out'));

<script src="https://rawgithub.com/patorjk/Extendible-BBCode-Parser/master/xbbcode.js"></script> 
 
<pre id="out"></pre>