Заменить текст на HTML-странице с помощью jQuery
Как заменить любую строку в JQuery?
Допустим, у меня есть строка "-9o0-9909"
и я хочу заменить его на другую строку.
7 ответов
Вы можете использовать следующее, чтобы заменить первое вхождение слова в теле страницы:
var replaced = $("body").html().replace('-9o0-9909','The new string');
$("body").html(replaced);
Если вы хотите заменить все вхождения слова, вам нужно использовать регулярное выражение и объявить его глобальным /g
:
var replaced = $("body").html().replace(/-1o9-2202/g,'The ALL new string');
$("body").html(replaced);
Если вы хотели один лайнер:
$("body").html($("body").html().replace(/12345-6789/g,'<b>abcde-fghi</b>'));
Вы в основном берете весь HTML в пределах <body>
теги страницы в строковую переменную, используя replace(), чтобы найти и изменить первое вхождение найденной строки новой строкой. Или, если вы хотите найти и заменить все вхождения строки, добавьте небольшое регулярное выражение в микс.
Посмотрите демонстрацию здесь - посмотрите на HTML вверху слева, чтобы увидеть исходный текст, jQuery ниже и вывод внизу справа.
Как и другие, упомянутые в этой теме, замена всего тела HTML - плохая идея, потому что он повторно вставляет весь DOM и потенциально может нарушить любой другой javascript, который воздействовал на эти элементы.
Вместо этого замените только текст на своей странице, а не сами элементы DOM, используя фильтр jQuery:
$('body :not(script)').contents().filter(function() {
return this.nodeType === 3;
}).replaceWith(function() {
return this.nodeValue.replace('-9o0-9909','The new string');
});
this.nodeType - это тип узла, который мы собираемся заменить содержимым. nodeType 3 - это текст. Смотрите полный список здесь.
... У меня есть строка "-9o0-9909", и я хочу заменить ее другой строкой.
Код ниже сделает это.
var str = '-9o0-9909';
str = 'new string';
Шутки в сторону, замена текстовых узлов не тривиальна с JavaScript.
Я написал пост об этом: замена текста на JavaScript.
Идея html replace хорошая, но если сделать это для document.body, страница будет мигать и реклама исчезнет.
Мое решение:
$("*:contains('purrfect')").each(function() {
var replaced = $(this).html().replace(/purrfect/g, "purrfect");
$(this).html(replaced);
});
$("#elementID").html("another string");
var replaced = $("body").html().replace(/-1o9-2202/g,'The ALL new string');
$("body").html(replaced);
для переменной:
var replaced = $("body").html().replace(new RegExp("-1o9-2202", "igm"),'The ALL new string');
$("body").html(replaced);
Просмотрите статью Падолси о поиске и замене DOM, а также о библиотеке для реализации описанного алгоритма.
В этом примере использования я заменяю весь текст внутри <div id="content">
это похоже на номер телефона США с tel:
Схема ссылки:
findAndReplaceDOMText(document.getElementById('content'), {
find:/\b(\d\d\d-\d\d\d-\d\d\d\d)\b/g,
replace:function (portion) {
var a = document.createElement('a');
a.className = 'telephone';
a.href = 'tel:' + portion.text.replace(/\D/g, '');
a.textContent = portion.text;
return a;
}
});