使用Javascript删除并更改HTML中某个URL的某些文本

Question

如何使用Javascript删除和更改HTML中某个URL的某些文本。

例如，我在我的HTML中有这张instagram照片。

<img src="http://scontent-b.cdninstagram.com/hphotos-xaf1/t51.2885-15/10611172_606838796104009_200732638_s.jpg"> 

然后，我希望它给它更大的图像预览这里被自动链接（通过JavaScript）： http://scontent-b.cdninstagram.com/hphotos-xaf1/10611172_606838796104009_200732638_n.jpg

注意，_s改为_n和文件夹/t51.2885-15是已在网址中移除。

所以基本上我只想要一个JavaScript来删除/t51.2885-15并用_n替换_s。

我认为这可以实现使用JavaScript，但我不知道为什么。这可以用几行代码轻松写出来吗？或者，除了编写JavaScript之外，您还有其他建议吗？

Answer 1

我建议，在纯JavaScript的（如你的问题并不意味着你的任何图书馆的使用，如用于jquery例如）：

// wrapped the function as an 'Immediately-Invoked Function Expression' (IIFE) 
// so that it'll be called automatically, when encountered: 
(function() { 
// gets all the images on the page: 
    var images = document.querySelectorAll('img'), 
// creates an '<a>' element: 
     link = document.createElement('a'), 
// creates a variable (for later use, within the 'forEach()'): 
     newLink; 

// uses 'Array.prototype.forEach()' to iterate over the images: 
    [].forEach.call(images, function (img) { 

    // checks that 'instagram.com' is in the 'src' of the current image: 
     if (img.src.indexOf('instagram.com') > -1) { 
      // if it is, we clone the created-'a' element: 
      newLink = link.cloneNode(); 

      // set the 'href' of the '<a>' to the 'src' of the image, 
      // but first we replace '_s' with '_n', and 
      // any sequence of characters starting with a '/' followed by 
      // 't51' continuing with alphanumeric characters (a-z, 0-9, 
      // case-insensitive) periods ('.') or hyphens ('-') with an 
      // empty string (removing that sequence from the 'src'): 
      newLink.href = img.src.replace(/(_s)|(\/t51[\w\d.-]+)/g,function (match){ 
       return match === '_s' ? '_n' : ''; 
      }); 

      // insert the '<a>' element before the image: 
      img.parentNode.insertBefore(newLink,img); 
      // move the image into the '<a>': 
      newLink.appendChild(img); 
     } 
    }); 
})(); 

JS Fiddle demo。

这应该放在关闭</body>标签之前;以便在DOM构建完成后运行。

参考文献：

• Array.prototype.forEach()。
• document.querySelectorAll()。
• JavaScript Regular Expressions。
• Node.appendChild()。
• Node.cloneNode()。
• Node.insertBefore()。
• String.prototype.replace()。

Answer 2

你只需要这个img标签的地方“”标签下，如：

<a href="http://scontent-b.cdninstagram.com/hphotos-xaf1/10611172_606838796104009_200732638_n.jpg"><img src="http://scontent-b.cdninstagram.com/hphotos-xaf1/t51.2885-15/10611172_606838796104009_200732638_s.jpg"></a> 

这将创建超链接了图像，当你点击图片，将导航到啤酒的形象。

如果你不想导航到下一页，你将不得不注册点击事件的图像和onclick事件，你将改变图像的'src'属性（因为我现在很急，如果你需要样品。这段代码以后我可以为您提供）

jsfidle为下一个页面导航：http://jsfiddle.net/0bsrgtym/

而且你还可以看到我的第二个建议，示例代码（它使用jQuery的）从这里：http://jsfiddle.net/e7bLuro5/

Answer 3

编辑，更新

v1包装了图像元素，因为要求将小图像链接到较大图像，因此最初阅读问题。重读问题;出现要求较小的图像src被替换为较大的图像src？

尝试

V2

$("img[src*=cdninstagram]") 
.attr("src", function(i, o) { 
    return o.replace(/(t+\d+\.+\d+\-+\d+\/)/, "") 
     .replace(/_s/, "_n") 
}) 

的jsfiddle http://jsfiddle.net/guest271314/gwdusxuh/