使用Javascript和Jquery糾正Img Src路徑

Question

我正在一個網站上，其中的內容對於來自具有不同域的舊網站而言很重要。 大約一半的圖像具有相對的路徑，效果很好。 另一半具有用舊域硬編碼的絕對路徑。 舊站點已被刪除，因此這些圖像不再起作用。 但是確實導入了這些圖像，並且這些圖像存在於新服務器上。 將這些路徑更改為相對URL可解決此問題。

長期解決方案將是遍歷每個頁面，以從這些圖像src URL中刪除舊域。

但是，作為一個短期解決方案，我想應用一個JavaScript或jquery解決方法，該方法將遍歷頁面上的每個img，檢查每個圖像的url，如果它包含舊域，則將其刪除。 到目前為止，我還沒有取得太大的成功。

這是我的示例HTML：

<p><img src="somepicture.jpg"></p> <!-- this works -->
<p><img src="https://www.oldwebsitedomain.com/someotherpicture.jpg"></p> <!-- this doesn't -->

這是我寫的javascript / jquery：

$("img").each(function() {
    if ($(this).attr("src").indexOf("oldwebsitedomain.com") > -1) {
        $(this).attr("src").replace("https://www.oldwebsitedomain.com/","");
        }
});

如果我用console.log“ this”，則可以正確獲取頁面上的所有img對象。 如果我在控制台上登錄“ $（this）.attr（“ src”）”，則會得到每個圖像的URL。 我可以驗證我的if語句在正確的圖像URL上的計算結果是否為true，但是麻煩來自if語句。 替換似乎沒有運行，並且圖像的地址未修改。

我想念什么？

Answer 1

如何設置和獲取屬性 。

要設置任何屬性的值，jquery使用以下語法： $(this).attr("src", 'new value'); 。 要獲取值attribute = $(this).attr("src") ，請使用它。 我將這兩條線合並在一起。

$("img").each(function() {
    if ($(this).attr("src").indexOf("oldwebsitedomain.com") > -1) {
        $(this).attr("src", $(this).attr("src").replace("https://www.oldwebsitedomain.com/",""));
    }
});

Answer 2

為了使用jquery更改屬性，您必須將第二個參數傳遞給函數調用：

$(this).attr("src", "new src value");

Answer 3

.attr('src')僅返回特定屬性中的字符串。 該字符串與它所來自的DOM元素無關，因此對該字符串執行的任何操作都不會返回到DOM元素中。 你需要

str = $(this).attr('src');
$(this).attr('src', str.replace(....));

將更改后的字符串寫回。

Answer 4

您需要重置圖像源屬性。

var newsrc = $(this).attr("src").replace("https://www.oldwebsitedomain.com/","");
$(this).attr("src", newsrc);

---

.attr（attributeName，function）也可以用於重置圖像源。 使用示例，您不需要使用.each()

$("img").attr('src', function(_, value) {
    return value.indexOf("oldwebsitedomain.com") > -1 ?
        value.replace("https://www.oldwebsitedomain.com/","") :
        value;
});