我正在研究一个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">;
我对正则表达式并不熟悉,我真的需要有人来看待它,我迷失了。
答案 0 :(得分: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>
答案 1 :(得分:0)
首先,你的循环应该是:
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都会有更广泛的变化,而且这些代码显然不适用于它们。