แทนที่คำในเนื้อหา

มีวิธีแทนที่ข้อความปกติภายในองค์ประกอบตารางที่อยู่ในเนื้อหาของ HTML หรือไม่

ชอบแทนที่ "สวัสดี" ด้วย "สวัสดี"?

โปรดใช้JavaScript ที่ไม่มีjQueryเท่านั้น

ในการแทนที่สตริงใน HTML ของคุณด้วยสตริงอื่นให้ใช้วิธีการแทนที่ใน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');

ฟังก์ชันด้านล่างทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน:

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

สำหรับกรณีที่ 16kB ของ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 ได้อย่างไร

ใช้ฟังก์ชันการแทนที่สตริงจาวาสคริปต์เริ่มต้น

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

`และต่อไปนี้ฉันใช้การแทนที่ทั้งหมดในวงจร

ต้องการเพิ่มตัวอย่างให้กับคำตอบของอนาคตที่ขี้ขลาดเนื่องจากฉันได้รับข้อผิดพลาดนี้:

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>