Thay thế các từ trong nội dung văn bản

Có cách nào để thay thế văn bản bình thường trong một phần tử bảng được đặt trong phần nội dung của HTML không?

Giống như thay thế "xin chào" bằng "chào"?

Vui lòng chỉ sử dụng JavaScript mà không có jQuery .

Để thay thế một chuỗi trong HTML của bạn bằng một chuỗi khác, hãy sử dụng phương thức thay thế trên innerHTML :

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

Lưu ý rằng điều này sẽ thay thế phiên bản đầu tiên của hellotoàn bộ nội dung, bao gồm bất kỳ phiên bản nào trong mã HTML của bạn (ví dụ: tên lớp, v.v.), vì vậy hãy sử dụng thận trọng - để có kết quả tốt hơn, hãy thử giới hạn phạm vi thay thế của bạn bằng cách nhắm mục tiêu mã của bạn bằng document.getElementById hoặc tương tự.

Để thay thế tất cả các phiên bản của chuỗi đích, hãy sử dụng một biểu thức chính quy đơn giản với gcờ lobal:

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

Chức năng bên dưới hoạt động hoàn hảo đối với tôi:

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

Đây là một ví dụ sử dụng:

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

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

Bạn cũng có thể sử dụng thay thế trực tiếp như sau:

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

Nhưng hãy cẩn thận với nó vì nó có thể ảnh hưởng đến các thẻ, css và script.

CHỈNH SỬA: Đối với một giải pháp JavaScript thuần túy, hãy sử dụng phương pháp này để thay thế:

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

Tôi đã kết thúc với chức năng này để thay thế văn bản một cách an toàn mà không có tác dụng phụ (cho đến nay):

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

Nó dành cho những trường hợp 16kB findAndReplaceDOMTexthơi quá nặng.

Tôi đã từng gặp vấn đề tương tự. Tôi đã viết hàm của riêng mình bằng cách sử dụng thay thế trên innerHTML, nhưng nó sẽ làm hỏng các liên kết neo và tương tự.

Để làm cho nó hoạt động chính xác, tôi đã sử dụng một thư viện để thực hiện việc này.

Thư viện có một API tuyệt vời. Sau khi bao gồm tập lệnh, tôi gọi nó như thế này:

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

Tôi đang cố gắng thay thế một chuỗi thực sự lớn và vì lý do nào đó mà các biểu thức chính quy đang tạo ra một số lỗi / ngoại lệ.

Vì vậy, tôi đã tìm thấy sự thay thế này cho các biểu thức chính quy cũng chạy khá nhanh. Ít nhất thì nó đủ nhanh đối với tôi:

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

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

src: Làm thế nào để thay thế tất cả các lần xuất hiện của một chuỗi trong JavaScript?

Sử dụng hàm thay thế chuỗi javascript mặc định

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

Hãy thử áp dụng giải pháp được đề xuất ở trên trên tài liệu khá lớn, thay thế các chuỗi khá ngắn có thể có trong innerHTML hoặc thậm chí là innerText, và thiết kế html của bạn tốt nhất sẽ bị hỏng

Do đó, trước tiên tôi chỉ lấy các phần tử nút văn bản thông qua các nút HTML DOM, như thế này

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

`và sau đó tôi đã áp dụng thay thế cho tất cả chúng theo chu kỳ

Tôi muốn thêm một ví dụ vào câu trả lời của funky-future vì tôi liên tục gặp lỗi này:

Uncaught TypeError: element.childNodes is not iterable

sử dụng như thế này:

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

nó không hoạt động với tôi với bộ chọn jQuery.

Tôi là người mới Javascriptvà chỉ mới bắt đầu học những kỹ năng này. Vui lòng kiểm tra xem phương pháp dưới đây có hữu ích để thay thế văn bản hay không.

<script>

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

</script>

Đôi khi việc thay đổi làm document.body.innerHTMLhỏng một số tập lệnh JS trên trang. Đây là phiên bản, chỉ thay đổi nội dung của textcác phần tử:

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