Есть ли способ заменить обычный текст в элементе таблицы, помещенном в тело HTML?
Как заменить «привет» на «привет»?
Пожалуйста, используйте только JavaScript без jQuery .
javascript
html
Wahtever
источник
источник
hello, this is a text randomTexthello
должна бытьhi, this is a text randomTexthello
. Однако все остальные ответы здесь заменяют символы вместо слов.Ответы:
Чтобы заменить строку в вашем HTML на другую, используйте метод replace на innerHTML :
document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');
Обратите внимание, что это заменит первый экземпляр
hello
во всем теле, включая любые экземпляры в вашем HTML-коде (например, имена классов и т. Д.), Поэтому используйте с осторожностью - для получения лучших результатов попробуйте ограничить объем вашей замены, нацелив свой код с помощью document.getElementById или аналогичный.Чтобы заменить все экземпляры целевой строки, используйте простое регулярное выражение с
g
флагом lobal:document.body.innerHTML = document.body.innerHTML.replace(/hello/g, 'hi');
источник
<script type="text/javascript"> window.onload = clear(); function clear() { document.body.innerHTML = document.body.replace('ü', 'n'); } </script>
window.onload = clear;
без скобок «()». Когда вы пишете,clear()
вы фактически выполняете функцию, но вы хотите назначить функцию только обработчику onloadПриведенная ниже функция отлично работает для меня:
// 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 и скрипты.
РЕДАКТИРОВАТЬ: Что касается чистого решения 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
слишком тяжелы.источник
У меня такая же проблема. Я написал свою собственную функцию, используя замену на 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.
источник
Иногда при изменении
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");
источник
Хотя использование innerHTML.replace будет работать и довольно быстро, это нарушит состояние DOM. Вы можете воспроизвести это, установив «автофокус» в поле ввода, а затем изменив innerHTML в теле, он потеряет фокус.
Менее деструктивный подход:
// retrives all childNodes of body var childNodes = document.body.childNodes; // start replacing replaceInNodes(childNodes,"search","replace"); function replaceInNodes(nodes,search,replace){ // iterate through all nodes for (var i = 0; i < nodes.length; i++) { var curNode = nodes[i]; // if the node has attributes, let us look at those // i.E. we want to change "John" in the input placeholder to "Peter" - <input type="text" value="John"> if(curNode.attributes !== undefined){ var curNodeAttributes = curNode.attributes; for (var ii = 0; ii < curNodeAttributes.length; ii++) { // replace attribute values curNodeAttributes[ii].nodeValue = curNodeAttributes[ii].nodeValue.replace(search, replace); } } // It is a "TEXT_NODE" // i.E. <span>John</span> if(curNode.nodeType == 3){ curNode.data = this.injectIntoString(curNode.data); } // It is a "ELEMENT_NODE", meaning we need to go deeper if(curNode.nodeType == 1){ this.replaceInNodes(curNode.childNodes); } } }
Более подробную информацию можно найти здесь: https://zgheb.com/i?v=blog&pl=71#12.11.2020_-_Unobstrusively_replace_text_with_JavaScript Примечание: я являюсь автором указанной ссылки
источник
Я новичок
Javascript
и только начал изучать эти навыки. Пожалуйста, проверьте, подходит ли приведенный ниже метод для замены текста.<script> var txt=document.getElementById("demo").innerHTML; var pos = txt.replace(/Hello/g, "hi") document.getElementById("demo").innerHTML = pos; </script>
источник