使用JS替換DOM中的html

Question

我正在嘗試替換 DOM 中的電話號碼，而與它在 DOM 中的寫入位置無關。 我使用此代碼成功地在 jQuery 中做了類似的事情：

jQuery(document).ready(function($){

     function changePhoneNumbers (phoneContainer) {
    for (var i = 0; i < phoneContainer.length; i++) {
        if (jQuery(phoneContainer[i]).length > 0) {
            replaceFallbackNumber(phoneContainer[i]);
        }   
    }
}
function replaceFallbackNumber (container) {
    var oldNrs = [
        "0123 123456",
        "0123 123456",
    ];
    var newNr = "0231 177293-79";
    for (var i = 0; i < oldNrs.length; i++) {
        jQuery(container).html(jQuery(container).html().replace(oldNrs[i], newNr));
    }
}
var phoneContainer = [
    '.gglenumber',
    '.about_gastrohero',
    '.booklet'
];
changePhoneNumbers(phoneContainer);

});

現在的問題是，在重新設計網站后，電話號碼周圍並不總是有一個具有相同 class 或 id 的 div。 所以我需要找到一種方法來檢查每個 div 中的電話號碼並替換它。 棘手的部分是我目前只能使用 JS vanilla。

我發現的每個解決方案都只會更改整個 html 或添加一些內容，但我找不到有關如何僅更改電話號碼的提示。

有人對如何解決這個問題有任何想法或提示嗎？ 以下是一些示例容器

<span class="gglenumber">0231 123456</span> 

<a href="tel:0231 123456" class="link gglenumber">0231 123456</a>

Answer 1

使用 jQuery 可以使用$("element:contains(phonenumbergoeshere)")但如果您需要依賴 Vanilla JS，只需遍歷所有元素，然后在每個元素的 innerHTML

for (var i = 0; i < document.all.length; i++) {
if (document.all[i].innerHTML.search("phonenumbergoeshere") != -1) {
    var elementWithNumber = document.all[i];
    elementWithNumber.innerHTML = elementWithNumber.innerHTML.replace("oldphonenumber", "newphonenumber");
}
}

獲得元素后，您可以使用String.replace()方法將其替換為您的新電話號碼，或者您想要的任何內容，將其設置為新的 innerHTML。

希望有幫助！