Issue #3239123 by hooroomoo, bnjmnm, nod_: Refactor (if feasible) uses of the jQuery text function to use vanillaJS

2022-01-28 11:53:59 +02:00 · 2022-01-28 11:53:59 +02:00 · 8c62a32c2d
parent 6b8783b23a
commit 8c62a32c2d
71 changed files with 316 additions and 224 deletions
--- a/core/.eslintrc.jquery.json
+++ b/core/.eslintrc.jquery.json
@ -45,7 +45,7 @@
    "jquery/no-sizzle": 0,
    "jquery/no-slide": 0,
    "jquery/no-submit": 2,
-    "jquery/no-text": 0,
+    "jquery/no-text": 2,
    "jquery/no-toggle": 0,
    "jquery/no-trigger": 0,
    "jquery/no-trim": 2,
--- a/core/misc/tableresponsive.es6.js
+++ b/core/misc/tableresponsive.es6.js
@ -108,13 +108,15 @@
        // If the table has hidden columns, associate an action link with the
        // table to show the columns.
        if (hiddenLength > 0) {
-          this.$link.show().text(this.showText);
+          this.$link.show();
+          this.$link[0].textContent = this.showText;
        }
        // When the toggle is pegged, its presence is maintained because the user
        // has interacted with it. This is necessary to keep the link visible if
        // the user adjusts screen size and changes the visibility of columns.
        if (!pegged && hiddenLength === 0) {
-          this.$link.hide().text(this.hideText);
+          this.$link.hide();
+          this.$link[0].textContent = this.hideText;
        }
      },

@ -148,7 +150,8 @@
            // Keep track of the revealed headers, so they can be hidden later.
            self.$revealedCells = $().add(self.$revealedCells).add($header);
          });
-          this.$link.text(this.hideText).data('pegged', 1);
+          this.$link[0].textContent = this.hideText;
+          this.$link.data('pegged', 1);
        }
        // Hide revealed columns.
        else {
@ -177,7 +180,8 @@
            // Return the rest of the style attribute values to the element.
            $cell.attr('style', newProps.join(';'));
          });
-          this.$link.text(this.showText).data('pegged', 0);
+          this.$link[0].textContent = this.showText;
+          this.$link.data('pegged', 0);
          // Refresh the toggle link.
          $(window).trigger('resize.tableresponsive');
        }
--- a/core/misc/tableresponsive.js
+++ b/core/misc/tableresponsive.js
@ -34,11 +34,13 @@
      const hiddenLength = this.$headers.filter('.priority-medium:hidden, .priority-low:hidden').length;

      if (hiddenLength > 0) {
-        this.$link.show().text(this.showText);
+        this.$link.show();
+        this.$link[0].textContent = this.showText;
      }

      if (!pegged && hiddenLength === 0) {
-        this.$link.hide().text(this.hideText);
+        this.$link.hide();
+        this.$link[0].textContent = this.hideText;
      }
    },

@ -60,7 +62,8 @@
          $header.show();
          self.$revealedCells = $().add(self.$revealedCells).add($header);
        });
-        this.$link.text(this.hideText).data('pegged', 1);
+        this.$link[0].textContent = this.hideText;
+        this.$link.data('pegged', 1);
      } else {
        this.$revealedCells.hide();
        this.$revealedCells.each(function (index, element) {
@ -83,7 +86,8 @@

          $cell.attr('style', newProps.join(';'));
        });
-        this.$link.text(this.showText).data('pegged', 0);
+        this.$link[0].textContent = this.showText;
+        this.$link.data('pegged', 0);
        $(window).trigger('resize.tableresponsive');
      }
    }
--- a/core/misc/vertical-tabs.es6.js
+++ b/core/misc/vertical-tabs.es6.js
@ -84,8 +84,9 @@
          // Transform each details into a tab.
          $details.each(function () {
            const $that = $(this);
+            const $summary = $that.find('> summary');
            const verticalTab = new Drupal.verticalTab({
-              title: $that.find('> summary').text(),
+              title: $summary.length ? $summary[0].textContent : '',
              details: $that,
            });
            tabList.append(verticalTab.item);
@ -281,15 +282,13 @@
   */
  Drupal.theme.verticalTab = function (settings) {
    const tab = {};
+    tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>');
+    tab.title[0].textContent = settings.title;
    tab.item = $(
      '<li class="vertical-tabs__menu-item" tabindex="-1"></li>',
    ).append(
      (tab.link = $('<a href="#"></a>')
-        .append(
-          (tab.title = $(
-            '<strong class="vertical-tabs__menu-item-title"></strong>',
-          ).text(settings.title)),
-        )
+        .append(tab.title)
        .append(
          (tab.summary = $(
            '<span class="vertical-tabs__menu-item-summary"></span>',
--- a/core/misc/vertical-tabs.js
+++ b/core/misc/vertical-tabs.js
@ -36,8 +36,9 @@
        $this.wrap('<div class="vertical-tabs clearfix"></div>').before(tabList);
        $details.each(function () {
          const $that = $(this);
+          const $summary = $that.find('> summary');
          const verticalTab = new Drupal.verticalTab({
-            title: $that.find('> summary').text(),
+            title: $summary.length ? $summary[0].textContent : '',
            details: $that
          });
          tabList.append(verticalTab.item);
@ -132,7 +133,9 @@

  Drupal.theme.verticalTab = function (settings) {
    const tab = {};
-    tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#"></a>').append(tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>').text(settings.title)).append(tab.summary = $('<span class="vertical-tabs__menu-item-summary"></span>')));
+    tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>');
+    tab.title[0].textContent = settings.title;
+    tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#"></a>').append(tab.title).append(tab.summary = $('<span class="vertical-tabs__menu-item-summary"></span>')));
    return tab;
  };
 })(jQuery, Drupal, drupalSettings);
--- a/core/modules/block/js/block.admin.es6.js
+++ b/core/modules/block/js/block.admin.es6.js
@ -44,9 +44,8 @@
         *   The label of the block.
         */
        function toggleBlockEntry(index, label) {
-          const $label = $(label);
-          const $row = $label.parent().parent();
-          const textMatch = $label.text().toLowerCase().includes(query);
+          const $row = $(label).parent().parent();
+          const textMatch = label.textContent.toLowerCase().includes(query);
          $row.toggle(textMatch);
        }

--- a/core/modules/block/js/block.admin.js
+++ b/core/modules/block/js/block.admin.js
@ -16,9 +16,8 @@
        const query = e.target.value.toLowerCase();

        function toggleBlockEntry(index, label) {
-          const $label = $(label);
-          const $row = $label.parent().parent();
-          const textMatch = $label.text().toLowerCase().includes(query);
+          const $row = $(label).parent().parent();
+          const textMatch = label.textContent.toLowerCase().includes(query);
          $row.toggle(textMatch);
        }

--- a/core/modules/book/book.es6.js
+++ b/core/modules/book/book.es6.js
@ -26,8 +26,7 @@
          if (val === 'new') {
            return Drupal.t('New book');
          }
-
-          return Drupal.checkPlain($select.find(':selected').text());
+          return Drupal.checkPlain($select.find(':selected')[0].textContent);
        });
    },
  };
--- a/core/modules/book/book.js
+++ b/core/modules/book/book.js
@ -20,7 +20,7 @@
          return Drupal.t('New book');
        }

-        return Drupal.checkPlain($select.find(':selected').text());
+        return Drupal.checkPlain($select.find(':selected')[0].textContent);
      });
    }

--- a/core/modules/ckeditor/js/ckeditor.admin.es6.js
+++ b/core/modules/ckeditor/js/ckeditor.admin.es6.js
@ -285,7 +285,9 @@
          $group
            .attr('data-drupal-ckeditor-toolbar-group-name', name)
            .children('.ckeditor-toolbar-group-name')
-            .text(name);
+            .each(function () {
+              this.textContent = name;
+            });
        }

        // Invoke a user-provided callback and indicate failure.
--- a/core/modules/ckeditor/js/ckeditor.admin.js
+++ b/core/modules/ckeditor/js/ckeditor.admin.js
@ -119,7 +119,9 @@
            $group.removeAttr('aria-label').attr('data-drupal-ckeditor-type', 'group').attr('tabindex', 0).children('.ckeditor-toolbar-group-name').attr('id', groupID).end().children('.ckeditor-toolbar-group-buttons').attr('aria-labelledby', groupID);
          }

-          $group.attr('data-drupal-ckeditor-toolbar-group-name', name).children('.ckeditor-toolbar-group-name').text(name);
+          $group.attr('data-drupal-ckeditor-toolbar-group-name', name).children('.ckeditor-toolbar-group-name').each(function () {
+            this.textContent = name;
+          });
        }

        if (action === 'cancel') {
--- a/core/modules/ckeditor/js/ckeditor.language.admin.es6.js
+++ b/core/modules/ckeditor/js/ckeditor.language.admin.es6.js
@ -4,10 +4,16 @@
   */
  Drupal.behaviors.ckeditorLanguageSettingsSummary = {
    attach() {
-      $('#edit-editor-settings-plugins-language').drupalSetSummary((context) =>
-        $(
-          '#edit-editor-settings-plugins-language-language-list-type option:selected',
-        ).text(),
+      $('#edit-editor-settings-plugins-language').drupalSetSummary(
+        (context) => {
+          const $selected = $(
+            '#edit-editor-settings-plugins-language-language-list-type option:selected',
+          );
+          if ($selected.length) {
+            return $selected[0].textContent;
+          }
+          return '';
+        },
      );
    },
  };
--- a/core/modules/ckeditor/js/ckeditor.language.admin.js
+++ b/core/modules/ckeditor/js/ckeditor.language.admin.js
@ -8,7 +8,15 @@
 (function ($, Drupal) {
  Drupal.behaviors.ckeditorLanguageSettingsSummary = {
    attach() {
-      $('#edit-editor-settings-plugins-language').drupalSetSummary(context => $('#edit-editor-settings-plugins-language-language-list-type option:selected').text());
+      $('#edit-editor-settings-plugins-language').drupalSetSummary(context => {
+        const $selected = $('#edit-editor-settings-plugins-language-language-list-type option:selected');
+
+        if ($selected.length) {
+          return $selected[0].textContent;
+        }
+
+        return '';
+      });
    }

  };
--- a/core/modules/ckeditor/js/views/VisualView.es6.js
+++ b/core/modules/ckeditor/js/views/VisualView.es6.js
@ -67,15 +67,14 @@
        this.$el
          .find('[data-toolbar="active"]')
          .toggleClass('ckeditor-group-names-are-visible', groupNamesVisible);
-        this.$el
-          .find('.ckeditor-groupnames-toggle')
-          .text(
-            groupNamesVisible
+        const $toggle = this.$el.find('.ckeditor-groupnames-toggle');
+        $toggle
+          .each((index, element) => {
+            element.textContent = groupNamesVisible
              ? Drupal.t('Hide group names')
-              : Drupal.t('Show group names'),
-          )
+              : Drupal.t('Show group names');
+          })
          .attr('aria-pressed', groupNamesVisible);
-
        return this;
      },

--- a/core/modules/ckeditor/js/views/VisualView.js
+++ b/core/modules/ckeditor/js/views/VisualView.js
@ -34,7 +34,10 @@
      }

      this.$el.find('[data-toolbar="active"]').toggleClass('ckeditor-group-names-are-visible', groupNamesVisible);
-      this.$el.find('.ckeditor-groupnames-toggle').text(groupNamesVisible ? Drupal.t('Hide group names') : Drupal.t('Show group names')).attr('aria-pressed', groupNamesVisible);
+      const $toggle = this.$el.find('.ckeditor-groupnames-toggle');
+      $toggle.each((index, element) => {
+        element.textContent = groupNamesVisible ? Drupal.t('Hide group names') : Drupal.t('Show group names');
+      }).attr('aria-pressed', groupNamesVisible);
      return this;
    },

--- a/core/modules/comment/comment-entity-form.es6.js
+++ b/core/modules/comment/comment-entity-form.es6.js
@ -17,8 +17,7 @@
          Drupal.checkPlain(
            $(context)
              .find('.js-form-item-comment input:checked')
-              .next('label')
-              .text(),
+              .next('label')[0].textContent,
          ),
        );
    },
--- a/core/modules/comment/comment-entity-form.js
+++ b/core/modules/comment/comment-entity-form.js
@ -9,7 +9,7 @@
  Drupal.behaviors.commentFieldsetSummaries = {
    attach(context) {
      const $context = $(context);
-      $context.find('fieldset.comment-entity-settings-form').drupalSetSummary(context => Drupal.checkPlain($(context).find('.js-form-item-comment input:checked').next('label').text()));
+      $context.find('fieldset.comment-entity-settings-form').drupalSetSummary(context => Drupal.checkPlain($(context).find('.js-form-item-comment input:checked').next('label')[0].textContent));
    }

  };
--- a/core/modules/comment/js/comment-new-indicator.es6.js
+++ b/core/modules/comment/js/comment-new-indicator.es6.js
@ -30,9 +30,9 @@

      if (timestamp > lastViewTimestamp) {
        // Turn the placeholder into an actual "new" indicator.
-        const $comment = $(placeholder)
+        placeholder.textContent = newCommentString;
+        $placeholder
          .removeClass('hidden')
-          .text(newCommentString)
          .closest('.js-comment')
          // Add 'new' class to the comment, so it can be styled.
          .addClass('new');
@ -41,13 +41,13 @@
        // this is the first new comment in the DOM.
        if (isFirstNewComment) {
          isFirstNewComment = false;
-          $comment.prev().before('<a id="new"></a>');
+          $placeholder.prev().before('<a id="new"></a>');
          // If the URL points to the first new comment, then scroll to that
          // comment.
          if (window.location.hash === '#new') {
            window.scrollTo(
              0,
-              $comment.offset().top - Drupal.displace.offsets.top,
+              $placeholder.offset().top - Drupal.displace.offsets.top,
            );
          }
        }
--- a/core/modules/comment/js/comment-new-indicator.js
+++ b/core/modules/comment/js/comment-new-indicator.js
@ -18,14 +18,15 @@
      const lastViewTimestamp = Drupal.history.getLastRead(nodeID);

      if (timestamp > lastViewTimestamp) {
-        const $comment = $(placeholder).removeClass('hidden').text(newCommentString).closest('.js-comment').addClass('new');
+        placeholder.textContent = newCommentString;
+        $placeholder.removeClass('hidden').closest('.js-comment').addClass('new');

        if (isFirstNewComment) {
          isFirstNewComment = false;
-          $comment.prev().before('<a id="new"></a>');
+          $placeholder.prev().before('<a id="new"></a>');

          if (window.location.hash === '#new') {
-            window.scrollTo(0, $comment.offset().top - Drupal.displace.offsets.top);
+            window.scrollTo(0, $placeholder.offset().top - Drupal.displace.offsets.top);
          }
        }
      }
--- a/core/modules/comment/js/node-new-comments-link.es6.js
+++ b/core/modules/comment/js/node-new-comments-link.es6.js
@ -115,17 +115,17 @@
    function render(results) {
      Object.keys(results || {}).forEach((nodeID) => {
        if ($placeholdersToUpdate.hasOwnProperty(nodeID)) {
-          $placeholdersToUpdate[nodeID]
-            .attr('href', results[nodeID].first_new_comment_link)
-            .text(
-              Drupal.formatPlural(
-                results[nodeID].new_comment_count,
-                '1 new comment',
-                '@count new comments',
-              ),
-            )
+          const $placeholderItem = $placeholdersToUpdate[nodeID];
+          const result = results[nodeID];
+          $placeholderItem[0].textContent = Drupal.formatPlural(
+            result.new_comment_count,
+            '1 new comment',
+            '@count new comments',
+          );
+          $placeholderItem
+            .attr('href', result.first_new_comment_link)
            .removeClass('hidden');
-          show($placeholdersToUpdate[nodeID]);
+          show($placeholderItem);
        }
      });
    }
--- a/core/modules/comment/js/node-new-comments-link.js
+++ b/core/modules/comment/js/node-new-comments-link.js
@ -44,8 +44,11 @@
    function render(results) {
      Object.keys(results || {}).forEach(nodeID => {
        if ($placeholdersToUpdate.hasOwnProperty(nodeID)) {
-          $placeholdersToUpdate[nodeID].attr('href', results[nodeID].first_new_comment_link).text(Drupal.formatPlural(results[nodeID].new_comment_count, '1 new comment', '@count new comments')).removeClass('hidden');
-          show($placeholdersToUpdate[nodeID]);
+          const $placeholderItem = $placeholdersToUpdate[nodeID];
+          const result = results[nodeID];
+          $placeholderItem[0].textContent = Drupal.formatPlural(result.new_comment_count, '1 new comment', '@count new comments');
+          $placeholderItem.attr('href', result.first_new_comment_link).removeClass('hidden');
+          show($placeholderItem);
        }
      });
    }
--- a/core/modules/contextual/js/contextual.es6.js
+++ b/core/modules/contextual/js/contextual.es6.js
@ -107,9 +107,14 @@
      this.setAttribute('href', url + glue + destination);
    });

+    let title = '';
+    const $regionHeading = $region.find('h2');
+    if ($regionHeading.length) {
+      title = $regionHeading[0].textContent.trim();
+    }
    // Create a model and the appropriate views.
    const model = new contextual.StateModel({
-      title: $region.find('h2').eq(0).text().trim(),
+      title,
    });
    const viewOptions = $.extend({ el: $contextual, model }, options);
    contextual.views.push({
--- a/core/modules/contextual/js/contextual.js
+++ b/core/modules/contextual/js/contextual.js
@ -60,8 +60,15 @@
      const glue = url.indexOf('?') === -1 ? '?' : '&';
      this.setAttribute('href', url + glue + destination);
    });
+    let title = '';
+    const $regionHeading = $region.find('h2');
+
+    if ($regionHeading.length) {
+      title = $regionHeading[0].textContent.trim();
+    }
+
    const model = new contextual.StateModel({
-      title: $region.find('h2').eq(0).text().trim()
+      title
    });
    const viewOptions = $.extend({
      el: $contextual,
--- a/core/modules/contextual/js/views/AuralView.es6.js
+++ b/core/modules/contextual/js/views/AuralView.es6.js
@ -35,16 +35,19 @@
        this.$el.find('.contextual-links').prop('hidden', !isOpen);

        // Update the view of the trigger.
-        this.$el
-          .find('.trigger')
-          .text(
-            Drupal.t('@action @title configuration options', {
-              '@action': !isOpen
-                ? this.options.strings.open
-                : this.options.strings.close,
-              '@title': this.model.get('title'),
-            }),
-          )
+        const $trigger = this.$el.find('.trigger');
+        $trigger
+          .each((index, element) => {
+            element.textContent = Drupal.t(
+              '@action @title configuration options',
+              {
+                '@action': !isOpen
+                  ? this.options.strings.open
+                  : this.options.strings.close,
+                '@title': this.model.get('title'),
+              },
+            );
+          })
          .attr('aria-pressed', isOpen);
      },
    },
--- a/core/modules/contextual/js/views/AuralView.js
+++ b/core/modules/contextual/js/views/AuralView.js
@ -16,10 +16,13 @@
    render() {
      const isOpen = this.model.get('isOpen');
      this.$el.find('.contextual-links').prop('hidden', !isOpen);
-      this.$el.find('.trigger').text(Drupal.t('@action @title configuration options', {
-        '@action': !isOpen ? this.options.strings.open : this.options.strings.close,
-        '@title': this.model.get('title')
-      })).attr('aria-pressed', isOpen);
+      const $trigger = this.$el.find('.trigger');
+      $trigger.each((index, element) => {
+        element.textContent = Drupal.t('@action @title configuration options', {
+          '@action': !isOpen ? this.options.strings.open : this.options.strings.close,
+          '@title': this.model.get('title')
+        });
+      }).attr('aria-pressed', isOpen);
    }

  });
--- a/core/modules/editor/js/editor.es6.js
+++ b/core/modules/editor/js/editor.es6.js
@ -132,7 +132,7 @@
      const message = Drupal.t(
        'Changing the text format to %text_format will permanently remove content that is not allowed in that text format.<br><br>Save your changes before switching the text format to avoid losing data.',
        {
-          '%text_format': $(select).find('option:selected').text(),
+          '%text_format': $(select).find('option:selected')[0].textContent,
        },
      );
      const confirmationDialog = Drupal.dialog(`<div>${message}</div>`, {
--- a/core/modules/editor/js/editor.js
+++ b/core/modules/editor/js/editor.js
@ -68,7 +68,7 @@

    if (hasContent && supportContentFiltering) {
      const message = Drupal.t('Changing the text format to %text_format will permanently remove content that is not allowed in that text format.<br><br>Save your changes before switching the text format to avoid losing data.', {
-        '%text_format': $(select).find('option:selected').text()
+        '%text_format': $(select).find('option:selected')[0].textContent
      });
      const confirmationDialog = Drupal.dialog(`<div>${message}</div>`, {
        title: Drupal.t('Change text format?'),
--- a/core/modules/layout_builder/js/layout-builder.es6.js
+++ b/core/modules/layout_builder/js/layout-builder.es6.js
@ -43,9 +43,9 @@
         *   The link to add the block.
         */
        const toggleBlockEntry = (index, link) => {
-          const $link = $(link);
-          const textMatch = $link.text().toLowerCase().indexOf(query) !== -1;
-          $link.toggle(textMatch);
+          const textMatch =
+            link.textContent.toLowerCase().indexOf(query) !== -1;
+          $(link).toggle(textMatch);
        };

        // Filter if the length of the query is at least 2 characters.
--- a/core/modules/layout_builder/js/layout-builder.js
+++ b/core/modules/layout_builder/js/layout-builder.js
@ -23,9 +23,8 @@
        const query = e.target.value.toLowerCase();

        const toggleBlockEntry = (index, link) => {
-          const $link = $(link);
-          const textMatch = $link.text().toLowerCase().indexOf(query) !== -1;
-          $link.toggle(textMatch);
+          const textMatch = link.textContent.toLowerCase().indexOf(query) !== -1;
+          $(link).toggle(textMatch);
        };

        if (query.length >= 2) {
--- a/core/modules/locale/locale.admin.es6.js
+++ b/core/modules/locale/locale.admin.es6.js
@ -79,14 +79,13 @@

          $tr.toggleClass('expanded');

-          // Change screen reader text.
-          $tr.find('.locale-translation-update__prefix').text(() => {
-            if ($tr.hasClass('expanded')) {
-              return Drupal.t('Hide description');
-            }
-
-            return Drupal.t('Show description');
-          });
+          const $localePrefix = $tr.find('.locale-translation-update__prefix');
+          if ($localePrefix.length) {
+            // Change screen reader text.
+            $localePrefix[0].textContent = $tr.hasClass('expanded')
+              ? Drupal.t('Hide description')
+              : Drupal.t('Show description');
+          }
        });
        $table.find('.requirements, .links').hide();
      }
--- a/core/modules/locale/locale.admin.js
+++ b/core/modules/locale/locale.admin.js
@ -56,13 +56,11 @@
          e.preventDefault();
          const $tr = $(this).closest('tr');
          $tr.toggleClass('expanded');
-          $tr.find('.locale-translation-update__prefix').text(() => {
-            if ($tr.hasClass('expanded')) {
-              return Drupal.t('Hide description');
-            }
+          const $localePrefix = $tr.find('.locale-translation-update__prefix');

-            return Drupal.t('Show description');
-          });
+          if ($localePrefix.length) {
+            $localePrefix[0].textContent = $tr.hasClass('expanded') ? Drupal.t('Hide description') : Drupal.t('Show description');
+          }
        });
        $table.find('.requirements, .links').hide();
      }
--- a/core/modules/media/js/type_form.es6.js
+++ b/core/modules/media/js/type_form.es6.js
@ -22,7 +22,7 @@
          .find('input[name^="options"]:checked')
          .parent()
          .each(function () {
-            vals.push(Drupal.checkPlain($(this).find('label').text()));
+            vals.push(Drupal.checkPlain($(this).find('label')[0].textContent));
          });
        if (!$(context).find('#edit-options-status').is(':checked')) {
          vals.unshift(Drupal.t('Not published'));
@ -35,18 +35,16 @@
          const vals = [];

          vals.push(
-            $(context)
-              .find(
-                '.js-form-item-language-configuration-langcode select option:selected',
-              )
-              .text(),
+            $(context).find(
+              '.js-form-item-language-configuration-langcode select option:selected',
+            )[0].textContent,
          );

          $(context)
            .find('input:checked')
            .next('label')
            .each(function () {
-              vals.push(Drupal.checkPlain($(this).text()));
+              vals.push(Drupal.checkPlain(this.textContent));
            });

          return vals.join(', ');
--- a/core/modules/media/js/type_form.js
+++ b/core/modules/media/js/type_form.js
@ -12,7 +12,7 @@
      $context.find('#edit-workflow').drupalSetSummary(context => {
        const vals = [];
        $(context).find('input[name^="options"]:checked').parent().each(function () {
-          vals.push(Drupal.checkPlain($(this).find('label').text()));
+          vals.push(Drupal.checkPlain($(this).find('label')[0].textContent));
        });

        if (!$(context).find('#edit-options-status').is(':checked')) {
@ -23,9 +23,9 @@
      });
      $(context).find('#edit-language').drupalSetSummary(context => {
        const vals = [];
-        vals.push($(context).find('.js-form-item-language-configuration-langcode select option:selected').text());
+        vals.push($(context).find('.js-form-item-language-configuration-langcode select option:selected')[0].textContent);
        $(context).find('input:checked').next('label').each(function () {
-          vals.push(Drupal.checkPlain($(this).text()));
+          vals.push(Drupal.checkPlain(this.textContent));
        });
        return vals.join(', ');
      });
--- a/core/modules/media_library/js/media_library.view.es6.js
+++ b/core/modules/media_library/js/media_library.view.es6.js
@ -39,9 +39,8 @@
            Drupal.announce(announcement);
          },
        );
-        const $label = $(
-          '<label class="media-library-select-all"></label>',
-        ).text(Drupal.t('Select all media'));
+        const $label = $('<label class="media-library-select-all"></label>');
+        $label[0].textContent = Drupal.t('Select all media');
        $label.prepend($checkbox);
        $view.find('.js-media-library-item').first().before($label);
      }
--- a/core/modules/media_library/js/media_library.view.js
+++ b/core/modules/media_library/js/media_library.view.js
@ -21,7 +21,8 @@
          }) : Drupal.t('Zero items selected');
          Drupal.announce(announcement);
        });
-        const $label = $('<label class="media-library-select-all"></label>').text(Drupal.t('Select all media'));
+        const $label = $('<label class="media-library-select-all"></label>');
+        $label[0].textContent = Drupal.t('Select all media');
        $label.prepend($checkbox);
        $view.find('.js-media-library-item').first().before($label);
      }
--- a/core/modules/media_library/js/media_library.widget.es6.js
+++ b/core/modules/media_library/js/media_library.widget.es6.js
@ -44,28 +44,28 @@
        show: Drupal.t('Show media item weights'),
        hide: Drupal.t('Hide media item weights'),
      };
-      $(
-        once(
-          'media-library-toggle',
-          '.js-media-library-widget-toggle-weight',
-          context,
-        ),
-      )
-        .on('click', (e) => {
-          e.preventDefault();
-          $(e.currentTarget)
-            .toggleClass('active')
-            .text(
-              $(e.currentTarget).hasClass('active')
-                ? strings.hide
-                : strings.show,
-            )
-            .closest('.js-media-library-widget')
-            .find('.js-media-library-item-weight')
-            .parent()
-            .toggle();
-        })
-        .text(strings.show);
+      const mediaLibraryToggle = once(
+        'media-library-toggle',
+        '.js-media-library-widget-toggle-weight',
+        context,
+      );
+      $(mediaLibraryToggle).on('click', (e) => {
+        e.preventDefault();
+        const $target = $(e.currentTarget);
+        e.currentTarget.textContent = $target.hasClass('active')
+          ? strings.show
+          : strings.hide;
+        $target
+          .toggleClass('active')
+          .closest('.js-media-library-widget')
+          .find('.js-media-library-item-weight')
+          .parent()
+          .toggle();
+      });
+      mediaLibraryToggle.forEach((item) => {
+        item.textContent = strings.show;
+      });
+
      $(once('media-library-toggle', '.js-media-library-item-weight', context))
        .parent()
        .hide();
--- a/core/modules/media_library/js/media_library.widget.js
+++ b/core/modules/media_library/js/media_library.widget.js
@ -29,10 +29,16 @@
        show: Drupal.t('Show media item weights'),
        hide: Drupal.t('Hide media item weights')
      };
-      $(once('media-library-toggle', '.js-media-library-widget-toggle-weight', context)).on('click', e => {
+      const mediaLibraryToggle = once('media-library-toggle', '.js-media-library-widget-toggle-weight', context);
+      $(mediaLibraryToggle).on('click', e => {
        e.preventDefault();
-        $(e.currentTarget).toggleClass('active').text($(e.currentTarget).hasClass('active') ? strings.hide : strings.show).closest('.js-media-library-widget').find('.js-media-library-item-weight').parent().toggle();
-      }).text(strings.show);
+        const $target = $(e.currentTarget);
+        e.currentTarget.textContent = $target.hasClass('active') ? strings.show : strings.hide;
+        $target.toggleClass('active').closest('.js-media-library-widget').find('.js-media-library-item-weight').parent().toggle();
+      });
+      mediaLibraryToggle.forEach(item => {
+        item.textContent = strings.show;
+      });
      $(once('media-library-toggle', '.js-media-library-item-weight', context)).parent().hide();
    }

--- a/core/modules/menu_ui/menu_ui.admin.es6.js
+++ b/core/modules/menu_ui/menu_ui.admin.es6.js
@ -54,7 +54,7 @@
          const selectContents = document.createElement('option');
          selectContents.selected = machineName === selected;
          selectContents.value = machineName;
-          selectContents.innerText = options[machineName];
+          selectContents.textContent = options[machineName];
          $select.append(selectContents);
          totalOptions++;
        });
--- a/core/modules/menu_ui/menu_ui.admin.js
+++ b/core/modules/menu_ui/menu_ui.admin.js
@ -42,7 +42,7 @@
          const selectContents = document.createElement('option');
          selectContents.selected = machineName === selected;
          selectContents.value = machineName;
-          selectContents.innerText = options[machineName];
+          selectContents.textContent = options[machineName];
          $select.append(selectContents);
          totalOptions++;
        });
--- a/core/modules/node/content_types.es6.js
+++ b/core/modules/node/content_types.es6.js
@ -30,7 +30,7 @@
          .find('input[name^="options"]:checked')
          .next('label')
          .each(function () {
-            vals.push(Drupal.checkPlain($(this).text()));
+            vals.push(Drupal.checkPlain(this.textContent));
          });
        if (!$(context).find('#edit-options-status').is(':checked')) {
          vals.unshift(Drupal.t('Not published'));
@ -44,13 +44,13 @@
          $(
            '.js-form-item-language-configuration-langcode select option:selected',
            context,
-          ).text(),
+          )[0].textContent,
        );

        $('input:checked', context)
          .next('label')
          .each(function () {
-            vals.push(Drupal.checkPlain($(this).text()));
+            vals.push(Drupal.checkPlain(this.textContent));
          });

        return vals.join(', ');
@ -62,7 +62,7 @@
          .find('input:checked')
          .next('label')
          .each(function () {
-            vals.push(Drupal.checkPlain($(this).text()));
+            vals.push(Drupal.checkPlain(this.textContent));
          });
        if (!$editContext.find('#edit-display-submitted').is(':checked')) {
          vals.unshift(Drupal.t("Don't display post information"));
--- a/core/modules/node/content_types.js
+++ b/core/modules/node/content_types.js
@ -17,7 +17,7 @@
      $context.find('#edit-workflow').drupalSetSummary(context => {
        const vals = [];
        $(context).find('input[name^="options"]:checked').next('label').each(function () {
-          vals.push(Drupal.checkPlain($(this).text()));
+          vals.push(Drupal.checkPlain(this.textContent));
        });

        if (!$(context).find('#edit-options-status').is(':checked')) {
@ -28,9 +28,9 @@
      });
      $('#edit-language', context).drupalSetSummary(context => {
        const vals = [];
-        vals.push($('.js-form-item-language-configuration-langcode select option:selected', context).text());
+        vals.push($('.js-form-item-language-configuration-langcode select option:selected', context)[0].textContent);
        $('input:checked', context).next('label').each(function () {
-          vals.push(Drupal.checkPlain($(this).text()));
+          vals.push(Drupal.checkPlain(this.textContent));
        });
        return vals.join(', ');
      });
@ -38,7 +38,7 @@
        const vals = [];
        const $editContext = $(context);
        $editContext.find('input:checked').next('label').each(function () {
-          vals.push(Drupal.checkPlain($(this).text()));
+          vals.push(Drupal.checkPlain(this.textContent));
        });

        if (!$editContext.find('#edit-display-submitted').is(':checked')) {
--- a/core/modules/node/node.es6.js
+++ b/core/modules/node/node.es6.js
@ -45,7 +45,7 @@
            .find('input:checked')
            .next('label')
            .each(function () {
-              vals.push(Drupal.checkPlain($(this).text().trim()));
+              vals.push(Drupal.checkPlain(this.textContent.trim()));
            });
          return vals.join(', ');
        }
--- a/core/modules/node/node.js
+++ b/core/modules/node/node.js
@ -40,7 +40,7 @@

        if ($optionsContext.find('input').is(':checked')) {
          $optionsContext.find('input:checked').next('label').each(function () {
-            vals.push(Drupal.checkPlain($(this).text().trim()));
+            vals.push(Drupal.checkPlain(this.textContent.trim()));
          });
          return vals.join(', ');
        }
--- a/core/modules/quickedit/js/editors/plainTextEditor.es6.js
+++ b/core/modules/quickedit/js/editors/plainTextEditor.es6.js
@ -30,12 +30,15 @@
        const $fieldItems = this.$el.find('.quickedit-field');
        const $textElement = $fieldItems.length ? $fieldItems.eq(0) : this.$el;
        this.$textElement = $textElement;
-        editorModel.set('originalValue', this.$textElement.text().trim());
+        editorModel.set(
+          'originalValue',
+          this.$textElement[0].textContent.trim(),
+        );

        // Sets the state to 'changed' whenever the value changes.
        let previousText = editorModel.get('originalValue');
        $textElement.on('keyup paste', (event) => {
-          const currentText = $textElement.text().trim();
+          const currentText = $textElement[0].textContent.trim();
          if (previousText !== currentText) {
            previousText = currentText;
            editorModel.set('currentValue', currentText);
--- a/core/modules/quickedit/js/editors/plainTextEditor.js
+++ b/core/modules/quickedit/js/editors/plainTextEditor.js
@ -16,10 +16,10 @@
      const $fieldItems = this.$el.find('.quickedit-field');
      const $textElement = $fieldItems.length ? $fieldItems.eq(0) : this.$el;
      this.$textElement = $textElement;
-      editorModel.set('originalValue', this.$textElement.text().trim());
+      editorModel.set('originalValue', this.$textElement[0].textContent.trim());
      let previousText = editorModel.get('originalValue');
      $textElement.on('keyup paste', event => {
-        const currentText = $textElement.text().trim();
+        const currentText = $textElement[0].textContent.trim();

        if (previousText !== currentText) {
          previousText = currentText;
--- a/core/modules/quickedit/js/views/ContextualLinkView.es6.js
+++ b/core/modules/quickedit/js/views/ContextualLinkView.es6.js
@ -46,7 +46,9 @@
       */
      initialize(options) {
        // Insert the text of the quick edit toggle.
-        this.$el.find('a').text(options.strings.quickEdit);
+        this.$el.find('a').each((index, element) => {
+          element.textContent = options.strings.quickEdit;
+        });
        // Initial render.
        this.render();
        // Re-render whenever this entity's isActive attribute changes.
--- a/core/modules/quickedit/js/views/ContextualLinkView.js
+++ b/core/modules/quickedit/js/views/ContextualLinkView.js
@ -23,7 +23,9 @@
    },

    initialize(options) {
-      this.$el.find('a').text(options.strings.quickEdit);
+      this.$el.find('a').each((index, element) => {
+        element.textContent = options.strings.quickEdit;
+      });
      this.render();
      this.listenTo(this.model, 'change:isActive', this.render);
    },
--- a/core/modules/quickedit/js/views/EntityToolbarView.es6.js
+++ b/core/modules/quickedit/js/views/EntityToolbarView.es6.js
@ -127,18 +127,18 @@
          case 'opened':
            // The saving throbber is not managed by AJAX system. The
            // EntityToolbarView manages this visual element.
+            $button[0].textContent = Drupal.t('Save');
            $button
              .removeClass('action-saving icon-throbber icon-end')
-              .text(Drupal.t('Save'))
              .removeAttr('disabled')
              .attr('aria-hidden', !isDirty);
            break;

          // The changes to the fields of the entity are being committed.
          case 'committing':
+            $button[0].textContent = Drupal.t('Saving');
            $button
              .addClass('action-saving icon-throbber icon-end')
-              .text(Drupal.t('Saving'))
              .attr('disabled', 'disabled');
            break;

--- a/core/modules/quickedit/js/views/EntityToolbarView.js
+++ b/core/modules/quickedit/js/views/EntityToolbarView.js
@ -59,11 +59,13 @@

      switch (this.model.get('state')) {
        case 'opened':
-          $button.removeClass('action-saving icon-throbber icon-end').text(Drupal.t('Save')).removeAttr('disabled').attr('aria-hidden', !isDirty);
+          $button[0].textContent = Drupal.t('Save');
+          $button.removeClass('action-saving icon-throbber icon-end').removeAttr('disabled').attr('aria-hidden', !isDirty);
          break;

        case 'committing':
-          $button.addClass('action-saving icon-throbber icon-end').text(Drupal.t('Saving')).attr('disabled', 'disabled');
+          $button[0].textContent = Drupal.t('Saving');
+          $button.addClass('action-saving icon-throbber icon-end').attr('disabled', 'disabled');
          break;

        default:
--- a/core/modules/settings_tray/js/settings_tray.es6.js
+++ b/core/modules/settings_tray/js/settings_tray.es6.js
@ -74,11 +74,13 @@
      );
    }
    editMode = !!editMode;
-    const $editButton = $(toggleEditSelector);
    let $editables;
+    const editButton = document.querySelector(toggleEditSelector);
    // Turn on edit mode.
    if (editMode) {
-      $editButton.text(Drupal.t('Editing'));
+      if (editButton) {
+        editButton.textContent = Drupal.t('Editing');
+      }
      closeToolbarTrays();

      $editables = $(
@ -142,8 +144,9 @@
        $editables.off('.settingstray');
        $(quickEditItemSelector).off('.settingstray');
      }
-
-      $editButton.text(Drupal.t('Edit'));
+      if (editButton) {
+        editButton.textContent = Drupal.t('Edit');
+      }
      closeOffCanvas();
      disableQuickEdit();
    }
--- a/core/modules/settings_tray/js/settings_tray.js
+++ b/core/modules/settings_tray/js/settings_tray.js
@ -42,11 +42,14 @@
    }

    editMode = !!editMode;
-    const $editButton = $(toggleEditSelector);
    let $editables;
+    const editButton = document.querySelector(toggleEditSelector);

    if (editMode) {
-      $editButton.text(Drupal.t('Editing'));
+      if (editButton) {
+        editButton.textContent = Drupal.t('Editing');
+      }
+
      closeToolbarTrays();
      $editables = $(once('settingstray', '[data-drupal-settingstray="editable"]'));

@ -81,7 +84,10 @@
        $(quickEditItemSelector).off('.settingstray');
      }

-      $editButton.text(Drupal.t('Edit'));
+      if (editButton) {
+        editButton.textContent = Drupal.t('Edit');
+      }
+
      closeOffCanvas();
      disableQuickEdit();
    }
--- a/core/modules/system/js/system.date.es6.js
+++ b/core/modules/system/js/system.date.es6.js
@ -32,9 +32,6 @@
        return;
      }

-      const $target = $(target);
-      const $preview = $target.find('em');
-
      /**
       * Event handler that replaces date characters with value.
       *
@ -47,8 +44,14 @@
          dateFormats[key] ? dateFormats[key] : value,
        );

-        $preview.text(dateString);
-        $target.toggleClass('js-hide', !dateString.length);
+        // Set date preview.
+        target.forEach((item) => {
+          item.querySelectorAll('em').forEach((em) => {
+            em.textContent = dateString;
+          });
+        });
+
+        $(target).toggleClass('js-hide', !dateString.length);
      }

      /**
--- a/core/modules/system/js/system.date.js
+++ b/core/modules/system/js/system.date.js
@ -16,14 +16,15 @@
        return;
      }

-      const $target = $(target);
-      const $preview = $target.find('em');
-
      function dateFormatHandler(e) {
        const baseValue = e.target.value || '';
        const dateString = baseValue.replace(/\\?(.?)/gi, (key, value) => dateFormats[key] ? dateFormats[key] : value);
-        $preview.text(dateString);
-        $target.toggleClass('js-hide', !dateString.length);
+        target.forEach(item => {
+          item.querySelectorAll('em').forEach(em => {
+            em.textContent = dateString;
+          });
+        });
+        $(target).toggleClass('js-hide', !dateString.length);
      }

      $(source).on('keyup.dateFormat change.dateFormat input.dateFormat', dateFormatHandler).trigger('keyup');
--- a/core/modules/system/js/system.modules.es6.js
+++ b/core/modules/system/js/system.modules.es6.js
@ -40,12 +40,16 @@
        const re = new RegExp(`\\b${query}`, 'i');

        function showModuleRow(index, row) {
-          const $row = $(row);
-          const $sources = $row.find(
+          const sources = row.querySelectorAll(
            '.table-filter-text-source, .module-name, .module-description',
          );
-          const textMatch = $sources.text().search(re) !== -1;
-          $row.closest('tr').toggle(textMatch);
+          let sourcesConcat = '';
+          // Concatenate the textContent of the elements in the row.
+          sources.forEach((item) => {
+            sourcesConcat += item.textContent;
+          });
+          const textMatch = sourcesConcat.search(re) !== -1;
+          $(row).closest('tr').toggle(textMatch);
        }
        // Search over all rows and packages.
        $rowsAndDetails.show();
--- a/core/modules/system/js/system.modules.js
+++ b/core/modules/system/js/system.modules.js
@ -31,10 +31,13 @@
        const re = new RegExp(`\\b${query}`, 'i');

        function showModuleRow(index, row) {
-          const $row = $(row);
-          const $sources = $row.find('.table-filter-text-source, .module-name, .module-description');
-          const textMatch = $sources.text().search(re) !== -1;
-          $row.closest('tr').toggle(textMatch);
+          const sources = row.querySelectorAll('.table-filter-text-source, .module-name, .module-description');
+          let sourcesConcat = '';
+          sources.forEach(item => {
+            sourcesConcat += item.textContent;
+          });
+          const textMatch = sourcesConcat.search(re) !== -1;
+          $(row).closest('tr').toggle(textMatch);
        }

        $rowsAndDetails.show();
--- a/core/modules/system/system.libraries.yml
+++ b/core/modules/system/system.libraries.yml
@ -62,6 +62,7 @@ drupal.system.modules:
    - core/jquery
    - core/drupal
    - core/drupal.debounce
+    - core/drupal.nodelist.foreach
    - core/once
    - core/jquery.once.bc
    - core/drupal.announce
@ -79,6 +80,7 @@ drupal.system.date:
  dependencies:
    - core/jquery
    - core/drupal
+    - core/drupal.nodelist.foreach
    - core/drupalSettings
    - core/once
    - core/jquery.once.bc
--- a/core/modules/toolbar/js/escapeAdmin.es6.js
+++ b/core/modules/toolbar/js/escapeAdmin.es6.js
@ -34,11 +34,10 @@
    attach() {
      const toolbarEscape = once('escapeAdmin', '[data-toolbar-escape-admin]');
      if (toolbarEscape.length && pathInfo.currentPathIsAdmin) {
-        const $toolbarEscape = $(toolbarEscape);
        if (escapeAdminPath !== null) {
-          $toolbarEscape.attr('href', escapeAdminPath);
+          $(toolbarEscape).attr('href', escapeAdminPath);
        } else {
-          $toolbarEscape.text(Drupal.t('Home'));
+          toolbarEscape[0].textContent = Drupal.t('Home');
        }
      }
    },
--- a/core/modules/toolbar/js/escapeAdmin.js
+++ b/core/modules/toolbar/js/escapeAdmin.js
@ -19,12 +19,10 @@
      const toolbarEscape = once('escapeAdmin', '[data-toolbar-escape-admin]');

      if (toolbarEscape.length && pathInfo.currentPathIsAdmin) {
-        const $toolbarEscape = $(toolbarEscape);
-
        if (escapeAdminPath !== null) {
-          $toolbarEscape.attr('href', escapeAdminPath);
+          $(toolbarEscape).attr('href', escapeAdminPath);
        } else {
-          $toolbarEscape.text(Drupal.t('Home'));
+          toolbarEscape[0].textContent = Drupal.t('Home');
        }
      }
    }
--- a/core/modules/toolbar/js/toolbar.menu.es6.js
+++ b/core/modules/toolbar/js/toolbar.menu.es6.js
@ -41,10 +41,10 @@
      // Twist the toggle.
      $toggle.toggleClass('open', switcher);
      // Adjust the toggle text.
-      $toggle
-        .find('.action')
+      $toggle.find('.action').each((index, element) => {
        // Expand Structure, Collapse Structure.
-        .text(switcher ? ui.handleClose : ui.handleOpen);
+        element.textContent = switcher ? ui.handleClose : ui.handleOpen;
+      });
    }

    /**
@ -107,8 +107,9 @@
        const $item = $(element);
        if ($item.children('ul.toolbar-menu').length) {
          const $box = $item.children('.toolbar-box');
+          const $link = $box.find('a');
          options.text = Drupal.t('@label', {
-            '@label': $box.find('a').text(),
+            '@label': $link.length ? $link[0].textContent : '',
          });
          $item
            .children('.toolbar-box')
--- a/core/modules/toolbar/js/toolbar.menu.js
+++ b/core/modules/toolbar/js/toolbar.menu.js
@ -19,7 +19,9 @@
      switcher = typeof switcher !== 'undefined' ? switcher : !$item.hasClass('open');
      $item.toggleClass('open', switcher);
      $toggle.toggleClass('open', switcher);
-      $toggle.find('.action').text(switcher ? ui.handleClose : ui.handleOpen);
+      $toggle.find('.action').each((index, element) => {
+        element.textContent = switcher ? ui.handleClose : ui.handleOpen;
+      });
    }

    function toggleClickHandler(event) {
@ -50,8 +52,9 @@

        if ($item.children('ul.toolbar-menu').length) {
          const $box = $item.children('.toolbar-box');
+          const $link = $box.find('a');
          options.text = Drupal.t('@label', {
-            '@label': $box.find('a').text()
+            '@label': $link.length ? $link[0].textContent : ''
          });
          $item.children('.toolbar-box').append(Drupal.theme('toolbarMenuItemToggle', options));
        }
--- a/core/modules/toolbar/js/views/ToolbarVisualView.es6.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.es6.js
@ -292,9 +292,9 @@
        $orientationToggleButton[0].value = antiOrientation;
        $orientationToggleButton
          .attr('title', this.strings[antiOrientation])
-          .text(this.strings[antiOrientation])
          .removeClass(iconClass)
          .addClass(iconAntiClass);
+        $orientationToggleButton[0].textContent = this.strings[antiOrientation];

        // Update data offset attributes for the trays.
        const dir = document.documentElement.dir;
--- a/core/modules/toolbar/js/views/ToolbarVisualView.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.js
@ -146,7 +146,8 @@
      const $orientationToggle = this.$el.find('.toolbar-toggle-orientation').toggle(this.model.get('isTrayToggleVisible'));
      const $orientationToggleButton = $orientationToggle.find('button');
      $orientationToggleButton[0].value = antiOrientation;
-      $orientationToggleButton.attr('title', this.strings[antiOrientation]).text(this.strings[antiOrientation]).removeClass(iconClass).addClass(iconAntiClass);
+      $orientationToggleButton.attr('title', this.strings[antiOrientation]).removeClass(iconClass).addClass(iconAntiClass);
+      $orientationToggleButton[0].textContent = this.strings[antiOrientation];
      const dir = document.documentElement.dir;
      const edge = dir === 'rtl' ? 'right' : 'left';
      $trays.removeAttr('data-offset-left data-offset-right data-offset-top');
--- a/core/modules/views_ui/js/ajax.es6.js
+++ b/core/modules/views_ui/js/ajax.es6.js
@ -144,8 +144,9 @@
      re,
      `${response.title} $1 ${response.siteName}`,
    );
-
-    $('h1.page-title').text(response.title);
+    document.querySelectorAll('h1.page-title').forEach((item) => {
+      item.textContent = response.title;
+    });
  };

  /**
--- a/core/modules/views_ui/js/ajax.js
+++ b/core/modules/views_ui/js/ajax.js
@ -50,7 +50,9 @@
    const escapedSiteName = response.siteName.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
    const re = new RegExp(`.+ (.) ${escapedSiteName}`);
    doc.title = oldTitle.replace(re, `${response.title} $1 ${response.siteName}`);
-    $('h1.page-title').text(response.title);
+    document.querySelectorAll('h1.page-title').forEach(item => {
+      item.textContent = response.title;
+    });
  };

  Drupal.theme.tableDragChangedWarning = function () {
--- a/core/modules/views_ui/js/views-admin.es6.js
+++ b/core/modules/views_ui/js/views-admin.es6.js
@ -537,8 +537,7 @@
          $description = $option.find('.description');
          options[i] = {
            // Search on the lowercase version of the title text + description.
-            searchText: `${$title.text().toLowerCase()} ${$description
-              .text()
+            searchText: `${$title[0].textContent.toLowerCase()} ${$description[0].textContent.toLowerCase()}
              .toLowerCase()}`,
            // Maintain a reference to the jQuery object for each row, so we don't
            // have to create a new object inside the performance-sensitive keyup
--- a/core/modules/views_ui/js/views-admin.js
+++ b/core/modules/views_ui/js/views-admin.js
@ -255,7 +255,8 @@
        $title = $option.find('.title');
        $description = $option.find('.description');
        options[i] = {
-          searchText: `${$title.text().toLowerCase()} ${$description.text().toLowerCase()}`,
+          searchText: `${$title[0].textContent.toLowerCase()} ${$description[0].textContent.toLowerCase()}
+              .toLowerCase()}`,
          $div: $option
        };
      }
--- a/core/modules/views_ui/js/views_ui.listing.es6.js
+++ b/core/modules/views_ui/js/views_ui.listing.es6.js
@ -29,12 +29,15 @@
        const query = e.target.value.toLowerCase();

        function showViewRow(index, row) {
-          const $row = $(row);
-          const $sources = $row.find(
+          const sources = row.querySelectorAll(
            '[data-drupal-selector="views-table-filter-text-source"]',
          );
-          const textMatch = $sources.text().toLowerCase().indexOf(query) !== -1;
-          $row.closest('tr').toggle(textMatch);
+          let sourcesConcat = '';
+          sources.forEach((item) => {
+            sourcesConcat += item.textContent;
+          });
+          const textMatch = sourcesConcat.toLowerCase().indexOf(query) !== -1;
+          $(row).closest('tr').toggle(textMatch);
        }

        // Filter if the length of the query is at least 2 characters.
--- a/core/modules/views_ui/js/views_ui.listing.js
+++ b/core/modules/views_ui/js/views_ui.listing.js
@ -21,10 +21,13 @@
        const query = e.target.value.toLowerCase();

        function showViewRow(index, row) {
-          const $row = $(row);
-          const $sources = $row.find('[data-drupal-selector="views-table-filter-text-source"]');
-          const textMatch = $sources.text().toLowerCase().indexOf(query) !== -1;
-          $row.closest('tr').toggle(textMatch);
+          const sources = row.querySelectorAll('[data-drupal-selector="views-table-filter-text-source"]');
+          let sourcesConcat = '';
+          sources.forEach(item => {
+            sourcesConcat += item.textContent;
+          });
+          const textMatch = sourcesConcat.toLowerCase().indexOf(query) !== -1;
+          $(row).closest('tr').toggle(textMatch);
        }

        if (query.length >= 2) {
--- a/core/modules/views_ui/views_ui.libraries.yml
+++ b/core/modules/views_ui/views_ui.libraries.yml
@ -14,6 +14,7 @@ views_ui.admin:
    - core/drupal.form
    - core/drupal.ajax
    - core/drupal.dropbutton
+    - core/drupal.nodelist.foreach
    - views/views.ajax
    - views_ui/admin.styling

@ -24,6 +25,7 @@ views_ui.listing:
  dependencies:
    - core/jquery
    - core/drupal
+    - core/drupal.string.includes
    - core/once
    - core/jquery.once.bc
    - views_ui/admin.styling
--- a/core/themes/claro/js/vertical-tabs.es6.js
+++ b/core/themes/claro/js/vertical-tabs.es6.js
@ -130,7 +130,7 @@
            const $that = $(this);
            /* eslint-disable new-cap */
            const verticalTab = new Drupal.verticalTab({
-              title: $that.find('> summary').text(),
+              title: $that.find('> summary')[0].textContent,
              details: $that,
            });
            /* eslint-enable new-cap */
@ -394,16 +394,14 @@
   */
  Drupal.theme.verticalTab = (settings) => {
    const tab = {};
+    tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>');
+    tab.title[0].textContent = settings.title;
    tab.item = $(
      '<li class="vertical-tabs__menu-item" tabindex="-1"></li>',
    ).append(
      (tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append(
        $('<span class="vertical-tabs__menu-link-content"></span>')
-          .append(
-            (tab.title = $(
-              '<strong class="vertical-tabs__menu-link-title"></strong>',
-            ).text(settings.title)),
-          )
+          .append(tab.title)
          .append(
            (tab.summary = $(
              '<span class="vertical-tabs__menu-link-summary"></span>',
--- a/core/themes/claro/js/vertical-tabs.js
+++ b/core/themes/claro/js/vertical-tabs.js
@ -30,7 +30,7 @@
        $details.each(function initializeVerticalTabItems() {
          const $that = $(this);
          const verticalTab = new Drupal.verticalTab({
-            title: $that.find('> summary').text(),
+            title: $that.find('> summary')[0].textContent,
            details: $that
          });
          tabList.append(verticalTab.item);
@ -166,7 +166,9 @@

  Drupal.theme.verticalTab = settings => {
    const tab = {};
-    tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append($('<span class="vertical-tabs__menu-link-content"></span>').append(tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>').text(settings.title)).append(tab.summary = $('<span class="vertical-tabs__menu-link-summary"></span>'))));
+    tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>');
+    tab.title[0].textContent = settings.title;
+    tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append($('<span class="vertical-tabs__menu-link-content"></span>').append(tab.title).append(tab.summary = $('<span class="vertical-tabs__menu-link-summary"></span>'))));
    return tab;
  };