Замініть слова в основному тексті

Чи є спосіб замінити звичайний текст в елементі таблиці, який розміщений у тілі HTML?

Як заміна "привіт" на "привіт"?

Будь ласка, використовуйте лише JavaScript без jQuery .

Щоб замінити рядок у вашому HTML іншим, використовуйте метод replace на innerHTML :

document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');

Зверніть увагу, що це замінить перший екземпляр у helloвсьому тілі, включаючи будь-які екземпляри у вашому HTML-коді (наприклад, назви класів тощо), тому використовуйте з обережністю - для кращих результатів спробуйте обмежити обсяг вашої заміни, націливши свій код за допомогою document.getElementById або подібний.

Щоб замінити всі екземпляри цільового рядка, використовуйте простий регулярний вираз із gлобальним прапором:

document.body.innerHTML = document.body.innerHTML.replace(/hello/g, 'hi');

Функція нижче для мене ідеально працює:

// Note this *is* JQuery, see below for JS solution instead
function replaceText(selector, text, newText, flags) {
  var matcher = new RegExp(text, flags);
  $(selector).each(function () {
    var $this = $(this);
    if (!$this.children().length)
       $this.text($this.text().replace(matcher, newText));
  });
}

Ось приклад використання:

function replaceAllText() {
  replaceText('*', 'hello', 'hi', 'g');
}

$(document).ready(replaceAllText);
$('html').ajaxStop(replaceAllText);

Ви також можете використовувати пряму заміну, наприклад:

document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');

Але будьте обережні з цим, оскільки це також може впливати на теги, css та сценарії.

EDIT: Що стосується чистого рішення JavaScript, використовуйте замість цього метод:

function replaceText(selector, text, newText, flags) {
  var matcher = new RegExp(text, flags);
  var elems = document.querySelectorAll(selector), i;

  for (i = 0; i < elems.length; i++)
    if (!elems[i].childNodes.length)
      elems[i].innerHTML = elems[i].innerHTML.replace(matcher, newText);
}

Я отримав цю функцію для безпечної заміни тексту без побічних ефектів (поки що):

function replaceInText(element, pattern, replacement) {
    for (let node of element.childNodes) {
        switch (node.nodeType) {
            case Node.ELEMENT_NODE:
                replaceInText(node, pattern, replacement);
                break;
            case Node.TEXT_NODE:
                node.textContent = node.textContent.replace(pattern, replacement);
                break;
            case Node.DOCUMENT_NODE:
                replaceInText(node, pattern, replacement);
        }
    }
}

Це для випадків, коли 16 кБ findAndReplaceDOMTextтрохи занадто важкі.

У мене була та сама проблема. Я написав власну функцію, використовуючи replace на innerHTML, але це перекрутить якірні посилання тощо.

Щоб він працював коректно, я використовував бібліотеку щоб це зробити.

Бібліотека має чудовий API. Після включення сценарію я назвав його так:

findAndReplaceDOMText(document.body, {
  find: 'texttofind',
  replace: 'texttoreplace'
  }
);

Я намагався замінити дійсно великий рядок, і з якоїсь причини регулярні вирази видавали деякі помилки / винятки.

Тож я знайшов цю альтернативу регулярним виразам, яка також працює досить швидко. Принаймні це було досить швидко для мене:

var search = "search string";
var replacement = "replacement string";

document.body.innerHTML = document.body.innerHTML.split(search).join(replacement)

src: Як замінити всі входження рядка в JavaScript?

Використовуйте функцію заміни рядка javascript за замовчуванням

var curInnerHTML = document.body.innerHTML;
curInnerHTML = curInnerHTML.replace("hello", "hi");
document.body.innerHTML = curInnerHTML;

Спробуйте застосувати вище запропоноване рішення на досить великому документі, замінивши досить короткі рядки, які можуть бути присутніми у innerHTML або навіть innerText, і ваш HTML-дизайн у кращому випадку стає непрацездатним

Тому я спочатку вибираю лише текстові елементи вузлів через вузли HTML DOM, як це

function textNodesUnder(node){
  var all = [];
  for (node=node.firstChild;node;node=node.nextSibling){
    if (node.nodeType==3) all.push(node);
    else all = all.concat(textNodesUnder(node));
  }
  return all;
}

textNodes=textNodesUnder(document.body)
for (i in textNodes) { textNodes[i].nodeValue = textNodes[i].nodeValue.replace(/hello/g, 'hi');    

`і в подальшому я застосував заміну на всіх циклах

Я хотів додати приклад до відповіді funky-future, оскільки я постійно отримував цю помилку:

Uncaught TypeError: element.childNodes is not iterable

використовувати так:

replaceInText(document.body,"search term","replacement");

у мене це не працювало з селекторами jQuery.

Я новачок Javascriptі щойно почав вчитися цим навичкам. Будь ласка, перевірте, чи наведений нижче спосіб корисний для заміни тексту.

<script>

    var txt=document.getElementById("demo").innerHTML;
    var pos = txt.replace(/Hello/g, "hi")
    document.getElementById("demo").innerHTML = pos;

</script>

Іноді зміна document.body.innerHTMLламає деякі сценарії JS на сторінці. Ось версія, яка змінює лише зміст textелементів:

function replace(element, from, to) {
    if (element.childNodes.length) {
        element.childNodes.forEach(child => replace(child, from, to));
    } else {
        const cont = element.textContent;
        if (cont) element.textContent = cont.replace(from, to);
    }
};

replace(document.body, new RegExp("hello", "g"), "hi");