如何编写JavaScript函数替换元素及其子元素中的指定单词？

Your current approach works for basic scenarios, but it has a couple of critical limitations:

• Modifying innerHTML can accidentally alter HTML tags or attributes if your target word appears in them (for example, replacing "span" would break your <span> elements).
• It wipes out any event listeners attached to child elements, since re-setting innerHTML re-parses the entire subtree from scratch.

A far safer and more reliable approach is to traverse only the text nodes in your target element and its children, so you only modify actual content text without touching the DOM structure. Here's how to implement this:

Improved Code #

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<script>
// Helper function to escape special regex characters in the search term
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function replaceText(from, to, element) {
  // If an ID string is passed, fetch the corresponding element first
  if (typeof element === 'string') {
    element = document.getElementById(element);
    if (!element) return; // Exit early if the element doesn't exist
  }

  // Iterate over all child nodes of the current element
  const childNodes = element.childNodes;
  for (let i = 0; i < childNodes.length; i++) {
    const node = childNodes[i];
    
    if (node.nodeType === Node.TEXT_NODE) {
      // Replace the text content of this text node
      const regex = new RegExp(escapeRegExp(from), 'g');
      node.textContent = node.textContent.replace(regex, to);
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      // Recursively process child elements to cover nested content
      replaceText(from, to, node);
    }
  }
}

window.onload = function() {
  replaceText("Text", "Tekst", "test");
};
</script>
</head>
<body>
<div id="test">示例Text内容 <span>包含Text的子元素</span></div>
</body>
</html>

Key Enhancements: #

• Text Node Targeting: We only modify textContent of text nodes, ensuring HTML tags and attributes stay intact.
• Recursive Traversal: The function digs into every nested child element to guarantee all text (even deep inside the DOM) gets replaced.
• Regex Safety: The escapeRegExp helper ensures special characters in your search term (like ., *, or ?) are treated as literal values instead of regex operators.
• Flexible Input: You can pass either an element ID string or a direct DOM element reference to the function for added convenience.

This method is robust enough to handle complex DOM structures without unintended side effects.

内容的提问来源于stack exchange，提问作者Robin van der Vliet