Заменить текст на 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");

http://api.jquery.com/html/

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;
    }
});
Другие вопросы по тегам