使用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/