Gövde metnindeki kelimeleri değiştirin

HTML gövdesine yerleştirilen bir tablo öğesi içindeki normal metni değiştirmenin bir yolu var mı?

"Merhaba" yı "merhaba" ile değiştirmek gibi mi?

Lütfen jQuery olmadan yalnızca JavaScript kullanın .

HTML'nizdeki bir dizeyi başka bir dizeyle değiştirmek için , innerHTML'de değiştirme yöntemini kullanın :

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

Bunun hello, HTML kodunuzdaki tüm örnekler de dahil olmak üzere gövde genelinde ilk örneğinin yerini alacağını unutmayın (örneğin, sınıf adları vb.), Bu nedenle dikkatli kullanın - daha iyi sonuçlar için, kodunuzu kullanarak kodunuzu hedefleyerek değiştirme işleminizin kapsamını kısıtlamayı deneyin. document.getElementById veya benzeri.

Hedef dizenin tüm örneklerini değiştirmek için, global bayrağıyla basit bir normal ifade kullanın :

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

Aşağıdaki işlev benim için mükemmel çalışıyor:

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

İşte bir kullanım örneği:

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

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

Bunun gibi doğrudan bir değiştirme de kullanabilirsiniz:

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

Ancak etiketleri, css'leri ve komut dosyalarını da etkileyebileceğinden dikkatli olun.

DÜZENLEME: Saf bir JavaScript çözümüne gelince, bunun yerine şu yöntemi kullanın:

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

Metni yan etkiler olmadan güvenli bir şekilde değiştirmek için bu işlevi kullandım (şimdiye kadar):

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'nin findAndReplaceDOMTextbiraz fazla ağır olduğu durumlar içindir .

Ben de aynı sorunu yaşadım. InternalHTML'de replace kullanarak kendi işlevimi yazdım, ancak bağlantı bağlantılarını falan bozardı.

Doğru çalışmasını sağlamak için bunu yapmak için bir kütüphane kullandım .

Kitaplığın harika bir API'si var. Senaryoyu ekledikten sonra şöyle adlandırdım:

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

Gerçekten büyük bir dizgeyi değiştirmeye çalışıyordum ve nedense normal ifadeler bazı hatalar / istisnalar atıyordu.

Bu yüzden, oldukça hızlı çalışan normal ifadelere bir alternatif buldum. En azından benim için yeterince hızlıydı:

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

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

src: JavaScript'teki bir dizenin tüm tekrarlarını nasıl değiştirebilirim?

Varsayılan javascript dizesi değiştirme işlevini kullanın

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

Yukarıdaki önerilen çözümü çok büyük bir belgeye uygulamaya çalışın, innerHTML veya hatta innerText'te bulunabilecek oldukça kısa dizeleri değiştirin; html tasarımınız en iyi ihtimalle bozulur.

Bu nedenle, öncelikle bunun gibi HTML DOM düğümleri aracılığıyla yalnızca metin düğümü öğelerini alıyorum

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

Followingve daha sonra, dönüşümde hepsine değiştirmeyi uyguladım

Bu hatayı almaya devam ederken funky-Future'ın cevabına bir örnek eklemek istedim:

Uncaught TypeError: element.childNodes is not iterable

bunun gibi kullanın:

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

jQuery seçicilerle benim için çalışmadı.

Bazen değiştirmek document.body.innerHTML, sayfadaki bazı JS komut dosyalarını bozar. İşte yalnızca textöğelerin içeriğini değiştiren sürüm :

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

İnnerHTML.replace kullanılması işe yarayacak ve oldukça hızlı olsa da, bu DOM durumunu bozacaktır. Bunu, bir giriş alanında "otomatik odaklama" ayarlayarak ve ardından gövde üzerindeki internalHTML'yi değiştirerek çoğaltabilirsiniz, odağı kaybedecektir.

Daha az yıkıcı bir yaklaşım:

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

Daha fazla bilgiyi burada bulabilirsiniz: https://zgheb.com/i?v=blog&pl=71#12.11.2020_-_Unobstrusively_replace_text_with_JavaScript Not: Ben söz konusu bağlantının yazarıyım

Ben yeniyim Javascriptve bu becerileri öğrenmeye yeni başladım. Lütfen aşağıdaki yöntemin metni değiştirmek için yararlı olup olmadığını kontrol edin.

<script>

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

</script>