Заменить определенную строку на странице HTML, используя JQuery

Question

Мы предоставляем большой объем HTML-контента для импорта и отображения на чужой странице. Владельцы страницы размещают заголовок вокруг нашего блога контента, но заголовок - это имя нашего веб-сервиса, предоставляющего контент, а не удобное имя, которое мы хотим показывать пользователям. Они не могут понять, как изменить заголовок, мы не хотим менять название нашего веб-сервиса, и через несколько дней он должен хорошо выглядеть для демонстрации.

Идеальным решением для них было бы выяснить, как использовать свой инструмент портала, чтобы иметь возможность настраивать заголовки, но это вряд ли произойдет до демонстрации. Поэтому я подумал, что мы могли бы включить немного JavaScript в контент, который мы им отправляем, что изменило бы заголовок для них. Это даст им время, чтобы понять, что они делают.

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

<div class="titleClass"> Bad Title </div>

Я хотел бы заменить " Bad Title " с "Хорошим заголовком". Я хотел бы найти этот текст на странице, используя селектор jQuery, но, к сожалению, есть несколько элементов div с классом titleClass, и я хочу изменить только один из них .... есть ли селектор, который я мог бы использовать, который также проверьте текст «Плохое название» внутри тега div? Или я должен написать отдельную функцию, которая будет циклически проходить по всем различным заголовкам на странице, и проверять каждую из них, чтобы увидеть, содержит ли она «Плохой заголовок»? Если я должен сделать второе, есть ли у кого-нибудь пример кода для обмена?

Answer 1

Может быть, вы хотите сделать это проще?

$(document).ready( function() {
  $('div.titleClass:contains("Bad Title")').text( "Good title" );
});  

Посмотрите на селектор .

Answer 2

Сначала получите коллекцию всех элементов с соответствующим текстом:

var $matches = $('div.titleClass').filter(function() {
    return $(this).text() == 'Bad Title';
});

и затем замените текст соответствующих элементов:

$matches.each(function() {
    $(this).text('New Title');
});

Выше будет искать элементы с текстом точно совпадающим 'Bad Title'. Если вам нужен какой-либо элемент, который содержит , текст «Плохой заголовок», например, «Плохой заголовок», вы должны использовать indexOf или search , например:

return $(this).text().indexOf('Bad Title') > -1;

Последнее предостережение - чувствительность к регистру. Если вы хотите выполнить сравнение без учета регистра, я бы предложил что-то вроде этого:

// the div contains Bad Title of whatever case
return $(this).text().search(/Bad Title/i) > -1;

// the div exactly matches Bad Title of whatever case
return $(this).text().search(/Bad Title/i) > == 0;