Question

我正在研究一个bbcode示例，但我似乎无法让它工作。正则表达式匹配所有[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

您可能感兴趣的事情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>

Answer 2

首先，你的循环应该是：

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

（不是content_text_bb.length）

其次，您遇到的问题是size="(.*?)。这就是说：非贪婪地匹配任何内容，直到我找到第一个“跟随的东西”（在这种情况下，后面的东西是第一次出现" clickable="yes"

如果您查看输入文字，搜索[img size="{ANYTHING}" clickable="yes"]表示{ANYTHING}为：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处理。它只会匹配{em>完全一个[img]属性和一个size属性的clickable个bbcode代码！大多数免费类型的bbcode都会有更广泛的变化，而且这些代码显然不适用于它们。

正则表达式，不会停止匹配

2 个答案: