Найти и заменить слово в JavaScript

Question

Я пытаюсь найти и заменить слово в Javascript, HTML-структура не может быть изменить таким образом, я должен изменить только с помощью JS, не могу использовать JQuery, не так хорошо с JavaScript, хотя:

HTML структура выглядит следующим образом:

<a id="ys-cc-tablink"> 
    <em> 
    <img src="card.jpg"> 
    <span>&nbsp;Credit/Debit Card</span> 
    </em> 
</a> 

Я пытаюсь заменить кредитной/дебетовой Корзина с Название Оплата, что я пытался ниже и работает нормально, а также:

$("#ys-cc-tablink > em > span").each(function() { 
    var text = $(this).text(); 
    $(this).text(text.replace(' Credit/Debit Card', 'Payment')); 
}); 

Но мне нужно в JavaScript, вместо JQuery, может кто-нибудь, пожалуйста, помогите?

благодаря

UPDATE:

var str = document.getElementById("demo").getElementsByTagName("span")[0].innerHTML; 
var res = str.replace("Credit/Debit Card", "Payment"); 
document.getElementById("ys-cc-tablink").getElementsByTagName("span")[0].innerHTML = res; 

Answer 1

Вы можете получить все элементы, используя querySelectorAll петли через них и проверить, если текст, который вы хотите заменить существует, то его заменить:

var spans = document.querySelectorAll('#ys-cc-tablink span'); 

for(var i=0;i<spans.length;i++){ 
    var span_text = spans[i].innerText; 

    if(span_text.indexOf('Credit/Debit Card') != -1) 
     spans[i].innerText = span_text.replace("Credit/Debit Card", "Payment"); 
} 

Надеется, что это помогает.

---

var spans = document.querySelectorAll('#ys-cc-tablink span'); 
 

 
for(var i=0;i<spans.length;i++){ 
 
    var span_text = spans[i].innerText; 
 

 
    if(span_text.indexOf('Credit/Debit Card') != -1) 
 
    spans[i].innerText = span_text.replace("Credit/Debit Card", "Payment"); 
 
}

<a id="ys-cc-tablink"> 
 
    <em> 
 
    <img src=""> 
 
    <span>&nbsp;My Credit/Debit Card</span><br> 
 
    <span>&nbsp;test</span><br> 
 
    <span>&nbsp;Credit/Debit Card and some extra text</span> 
 
    </em> 
 
</a>

Answer 2

Я предполагаю, что ваша проблема связана с неразрывным пространством   лицом. Но если вы все равно меняете весь текст, почему бы вам не использовать $(this).text('Payment')?

Для справки NBSP может быть представлен на JavaScript как \u00A0. Таким образом, вы можете сделать $(this).text(text.replace('\u00A0Credit/Debit Card', 'Payment'));

без JQuery, используйте element.innerHTML = element.innerHTML.replace('...', '...'); или element.textContent = ...

Answer 3

Это дает ссылку элемент:

var elem = document 
    .getElementById("ys-cc-tablink") 
    .getElementsByTagName("em")[0] 
    .getElementsByTagName("span")[0]; 

Замена блока кода:

elem.innerHTML.replace("Credit/Debit Card", "Payment") 

var elem = document 
 
    .getElementById("ys-cc-tablink") 
 
    .getElementsByTagName("em")[0] 
 
    .getElementsByTagName("span")[0]; 
 

 
elem.innerHTML = elem.innerHTML.replace("Credit/Debit Card", "Payment");

<a id="ys-cc-tablink"> 
 
    <em> 
 
    <img src="card.jpg"> 
 
    <span>&nbsp;Credit/Debit Card</span> 
 
    </em> 
 
</a>