Question

我在网站中的某些图片上实现srcset属性并遇到问题，因为Chrome不喜欢包含空格的srcset图片网址。我的源HTML有许多图像标记，如下所示：

<img src="/images/image 1.jpg" alt="My alt" sizes="100vw" srcset="/images/image 1 136.jpg 136w, /images/image 1 165 165w, /images/image 1 286 286w">

我想要做的是用％20替换srcset中的空格，如下所示：

<img src="/images/image 1.jpg" alt="My alt" sizes="100vw" srcset="/images/image%201%20136.jpg 136w, /images/image%201%20165 165w, /images/image%201%20286 286w">

为了简化问题 - 如果我可以替换以下src中的n个空格，那么我可以解决我的问题：<img src="/images/image any number of spaces.jpg" />

我认为唯一的解决方案是使用lookbehind但是因为我在javascript中这样做不支持所以我很难过。我通常会使用类似：myText.replace(/src=".[^"]*"/gi,'%20')的东西，但这会替换整个字符串。 See this example.

我怀疑这个问题无法解决（而且只有在我们测试srcset的影响时才进行临时措施，之后我可以在源头修复它） - 但我不知道是否有一些我没想到会让我达到我想要的东西。

Answer 1

~~试试这个：~~

// your link    
//    var link = "/images/image 1 136.jpg 136w, /images/image 1 165 165w, /images/image 1 286 286w"
//   var src = link.substring(0, link.indexOf('.jpg'))
// your result
//    var result = encodeURI(src) + link.substring(link.indexOf(.jpg) + 4)

抱歉，我误解了问题

Answer 2

您可以将其拆分为两组并替换第二组中的空格

(img src="\/images\/)(.*\d\s\d{3}?)(\.jpg)?(\s\d{3}w)

img src="/images/     image 1 136.jpg 136w
img src="/images/     image%201%20136.jpg 136w

see it here

正则表达式在javascript中替换字符串的一部分空格

2 个答案: