Как заменить текст в HTML-документе, не влияя на разметку?

Question

Как я могу написать функцию javascript / jquery, которая заменяет текст в HTML-документе, не затрагивая разметку, только текстовое содержимое?

Например, если я хочу заменить слово «стиль» на «без стиля» здесь:

<tr>
<td style="width:300px">This TD has style</td>
<td style="width:300px">This TD has <span class="style100">style</span> too</td>
</tr>

Я не хочу, чтобы замена влияла на разметку, только текстовое содержимое, видимое пользователю.

Answer 1

Вам придется искать текстовые узлы в вашем документе, я использую рекурсивную функцию, подобную этой:

function replaceText(oldText, newText, node){ 
  node = node || document.body; // base node 

  var childs = node.childNodes, i = 0;

  while(node = childs[i]){ 
    if (node.nodeType == 3){ // text node found, do the replacement
      if (node.textContent) {
        node.textContent = node.textContent.replace(oldText, newText);
      } else { // support to IE
        node.nodeValue = node.nodeValue.replace(oldText, newText);
      }
    } else { // not a text mode, look forward
      replaceText(oldText, newText, node); 
    } 
    i++; 
  } 
}

Если вы сделаете это таким образом, ваша разметка и обработчики событий останутся без изменений.

Редактировать: Изменен код для поддержки IE, так как текстовые узлы в IE не имеют свойства textContent , в IE вы должны использовать свойство nodeValue и он также не реализует интерфейс Node .

Проверьте пример здесь .

Answer 2

Используйте селектор :contains, чтобы найти элементы с совпадающим текстом, а затем заменить их текстом.

$(":contains(style)").each(function() {
  for (node in this.childNodes) {
    if (node.nodeType == 3) { // text node
      node.textContent = node.textContent.replace("style", "no style");
    }
  }
});

К сожалению, вы не можете использовать text() для этого, поскольку он удаляет HTML из всех узлов-потомков, а не только из дочерних узлов, и замена не будет работать должным образом.