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

Question

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

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

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

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

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

Answer 1

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

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;

Answer 2

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

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

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