Выполнить функцию для всего видимого текста с JavaScript до HTML?

Question

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

В следующем примере кода используется JQuery:

$("*").each(function() {
  var t = $(this).text();
  if (t != "") {
    t = t.toUpperCase();
  }
});

Примечание. Я понимаю, что существуют способы выполнения функций, аналогичных приведенному выше в CSS. Я планирую использовать для преобразования всего римского текста в альтернативную систему написания Unicode с целью изучения системного обучения, но сначала я хочу понять основы.

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

• Элементы формы (кнопки, ввод и т. Д. c ...)
• Ссылки
• Основной текст страницы общего характера

Как изменить указанную выше функцию, чтобы она возвращала результаты, которые я ищу?

Answer 1

Сначала выясните, какие селекторы соответствуют тексту, который вы хотите включить или исключить. Например, чтобы сопоставить что-либо, кроме header и footer, вы можете использовать селектор

*:not(header):not(footer)

. Это можно использовать при рекурсивной итерации, чтобы определить, какие элементы вводить и изменять. (Вы можете сделать это с TreeWalker, чтобы выбрать нужные текстовые узлы.) Или вы можете использовать

button, a

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

Вы хотите выбрать текстовые узлы * только 1012 * - если вы просто переназначите .text() элемента, вы замените все его содержимого, включая HTML элементов - вы Вы будете повреждать HTML и удалять прослушиватели событий, et c. Это не желательно. Просто переназначьте текст текстовых узлов вместо:

// https://stackoverflow.com/q/2579666
const getTextNodes = (parent) => {
  const walker = document.createTreeWalker(
    parent,
    NodeFilter.SHOW_TEXT,
    null,
    false
  );
  const textNodes = [];

  while (node = walker.nextNode()) {
    textNodes.push(node);
  }
  return textNodes;
}

for (const elm of document.querySelectorAll('button, a')) {
  const descendantTextNodes = getTextNodes(elm);
  for (const textNode of descendantTextNodes) {
    textNode.textContent = textNode.textContent.toUpperCase();
  }
}
for (const input of document.querySelectorAll('input[type="button"]')) {
  input.value = input.value.toUpperCase();
}

<div>div</div>
<button>button</button>
<a>
  anchor
  <span>span descendant of anchor</span>
</a>
<input type="button" value="input">

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

Приведенный выше пример не зависит от большой библиотеки, такой как jQuery, но jQuery в любом случае не имеет достойного способа выбора текстовых узлов.