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

есть ли способ заменить обычный текст в элементе таблицы, который помещается в тело HTML?

Как заменить "привет" на "привет"?

пожалуйста, только использовать JavaScript без jQuery.

8 66
javascript html

8 ответов:

чтобы заменить строку в вашем HTML на другую используйте заменить метод on innerHTML:

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

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

заменить все экземпляры целевой строки, используйте простое регулярное выражение с gлобальные флаг:

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

функция ниже отлично работает для меня:

// 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);
}
11

У меня была та же проблема. Я написал свою собственную функцию, используя replace на innerHTML, но это испортило бы якорные ссылки и т. д.

чтобы заставить его работать правильно я использовал библиотека чтобы это сделать.

библиотека имеет удивительный API. После включения скрипта я назвал его так:

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

Я пытался заменить очень большие строки и по какой-то причине регулярные выражения бросали некоторые ошибки/исключения.

поэтому я нашел эту альтернативу регулярным выражениям, которая также работает довольно быстро. По крайней мере, это было достаточно быстро для меня: 

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

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

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

2

используйте функцию замены строки javascript по умолчанию

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

Я новичок в Javascript и только начал изучать эти навыки. Пожалуйста, проверьте, если ниже метод полезен для замены текста.

<script>

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

</script>
0

попробуйте применить предложенное выше решение на довольно большом документе, заменив довольно короткие строки, которые могут присутствовать в 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');

' и затем я применил замену на всех из них в цикле

0

Я закончил с этой функцией, чтобы безопасно заменить текст без побочных эффектов (до сих пор):

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);
        }
    }
}

Это для случаев, когда 16kB из findAndReplaceDOMText немного тяжеловаты.

0