Заменить слова в тексте
Есть ли способ заменить обычный текст в элементе таблицы, который находится в теле HTML?
Как заменить "привет" на "привет"?
Пожалуйста, используйте только JavaScript без jQuery.
8 ответов
Чтобы заменить строку в вашем 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');
Я закончил с этой функцией, чтобы безопасно заменить текст без побочных эффектов (пока):
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 слишком тяжелые
Иногда меняется 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");
Функция ниже работает отлично для меня:
// 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);
}
У меня такая же проблема. Я написал свою собственную функцию, используя 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)
Хотя использование 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 по умолчанию
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');
`и затем я применил замену для всех из них в цикле
Я новичок в Javascript и только начал изучать эти навыки. Пожалуйста, проверьте, если приведенный ниже метод полезен для замены текста.
<script>
var txt=document.getElementById("demo").innerHTML;
var pos = txt.replace(/Hello/g, "hi")
document.getElementById("demo").innerHTML = pos;
</script>
Хотел добавить пример к ответу funky-future, поскольку я продолжал получать эту ошибку:
Uncaught TypeError: element.childNodes is not iterable
использовать так:
replaceInText(document.body,"search term","replacement");
у меня это не сработало с селекторами jQuery.