2011-08-15 27 views
0

我试图使用JavaScript来解析和修改一些HTML(字符串)内的点的替换(。),并在这个网站中,有引用(如IMG SRC或CSS背景)包含文件名句号/句号/点/。JavaScript字符串的文件名

例如

<img src="../images/filename.01.png"> <img src="../images/filename.02.png"> 
<div style="background:url(../images/file.name.with.more.dots.gif)"> 

我尝试努力并未能拿出一个整齐的正则表达式来让我来分析这个字符串又吐回了没有这些文件名,例如点

<img src="../images/filename01.png"/> <img src="../images/filename02.png"/> 
<div style="background:url(../images/filenamewithmoredots.gif)"> 

我只是想影响图像文件名,并且很明显,我想单独的文件类型。

一个正则表达式,如:

/(.*)(?=(.gif|.png|.jpg|.jpeg)) 

让我到文件名和扩展名的主要部分seperately匹配,但它也横跨整个字符串匹配,不只是一个文件名我想内。

我无法控制传入的HTML,我只是消耗它。

帮助我请溢出,你是我唯一的希望!

+0

在第二个示例代码块中是否应该有** no **点? –

+0

没有。 'filename.01.png'变成'filename01.png' –

+0

啊gotcha我想你meand .. dir路径 –

回答

1

我同意,这是不适合的正则表达式的问题,更别说一个整洁的表达。

但我相信你不是在这里听到的。所以,如果你想保持输入字符串作为...

var src, result = '<img src="../images/filename.01.png"> <img src="../images/filename.02.png"><div style="background:url(../images/file.name.with.more.dots.gif)">'; 
do { 
    src = result; 
    result = src.replace(/((?:url(\()|href=|src=)['"]?(?:[^'"\/]*\/)*[^'"\/]*)\.(?=[^\.'")]*\.(?:gif|png|jpe?g)['")>}\s])/g, '$1'); 
} while (result != src) 

基本上,它不断去除图像的URL文件名的倒数第二个点,直到有没有。这是表达式的细分,以防需要修改它。轻轻一踩:

  • (由于js regx没有后视,所以开始主捕获组。
    • (?:url(\()|href=|src=)['"]? URL的开始。强制url()被正确引用以便我们可以使用反向引用会更安全,但不幸的是,您给出的示例不是。
    • (?:[^'"\/]*\/)* url的文件夹部分。
    • [^'"\/]*第二个最后一个点之前的文件名的一部分。
  • ) close main group。
  • \.这是我们想摆脱的第二个点。
  • (?=看后面。
    • [^\.'")]*第二个最后一个点和最后一个点之间的文件名的一部分。
    • \.(?:gif|png|jpe?g)确保网址以图片扩展名结尾。
    • ['")>}\s]关闭网址,可以是引号,')','>','}'或空格。如果可能的话,用户应该回参考。 (第一次接听时是['"]?\b
  • )看完背后。
+0

男人,那个正则表达式真棒!试试看,只是为了见证美女:) – rugbyhead

+0

呵呵。我爱regx。真。但请记住,当您使用正则表达式来解决问题时,您会遇到两个问题 - 只需更改url关闭部分;原来的一个不会识别像('a.b.gif')这样的模式。 – Sheepy

0

你的问题是.*贪婪匹配。也许更好地尝试这样的事情

([^\/]*)(?=(.gif|.png|.jpg|.jpeg)) 

[^\/]是一个字符类,每一个字符匹配,但斜线

另一点是,你需要躲避.逐字匹配它

([^\/]*)(?=\.(gif|png|jpg|jpeg)) 
0

的问题是.意味着“任何字符”。

逃避它:

/(.*)(?=(\.gif|\.png|\.jpg|\.jpeg)) 
1

考虑使用DOM,而不是正则表达式。一种方法是创建假元素。

var fake = document.createElement('div'); 
fake.innerHTML = incomingHTML: // Not really part of JS standard but all the 'main' browsers support it 
var background = fake.childNodes[0].style.background; 
// Now use a regex if need be: /url\(\"?(.*)\"?\)/ 

// If img is at childNodes[1] 
var url = fake.childNodes[1].src; 

使用jQuery,这是容易得多:

$(incomingHTML).find('img').each(function() { $(this).attr('src'); });