diff --git a/CHANGES.rst b/CHANGES.rst
index 20ebaf07322..a2efed9d2b0 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -109,6 +109,9 @@ Bugs fixed
   Patch by Bénédikt Tran.
 * #11894: Do not add checksums to css files if building using the htmlhelp builder.
   Patch by mkay.
+* #12052: Remove ``<script>`` and ``<style>`` tags from the content of search result
+  summary snippets.
+  Patch by James Addison.
 
 Testing
 -------
diff --git a/sphinx/themes/basic/static/searchtools.js b/sphinx/themes/basic/static/searchtools.js
index 1197fa9f4a0..09524ac9c2f 100644
--- a/sphinx/themes/basic/static/searchtools.js
+++ b/sphinx/themes/basic/static/searchtools.js
@@ -162,7 +162,9 @@ const Search = {
 
   htmlToText: (htmlString, anchor) => {
     const htmlElement = new DOMParser().parseFromString(htmlString, 'text/html');
-    htmlElement.querySelectorAll(".headerlink").forEach((el) => { el.remove() });
+    for (const removalQuery of [".headerlinks", "script", "style"]) {
+      htmlElement.querySelectorAll(removalQuery).forEach((el) => { el.remove() });
+    }
     if (anchor) {
       const anchorContent = htmlElement.querySelector(`[role="main"] ${anchor}`);
       if (anchorContent) return anchorContent.textContent;
diff --git a/tests/js/searchtools.js b/tests/js/searchtools.js
index 91c35a6ba14..8cbd796b860 100644
--- a/tests/js/searchtools.js
+++ b/tests/js/searchtools.js
@@ -61,20 +61,33 @@ describe('Basic html theme search', function() {
 describe("htmlToText", function() {
 
   const testHTML = `<html>
-  <div class="body" role="main">
-    <section id="getting-started">
-      <h1>Getting Started</h1>
-      <p>Some text</p>
-    </section>
-    <section id="other-section">
-      <h1>Other Section</h1>
-      <p>Other text</p>
-    </section>
-    <section id="yet-another-section">
-      <h1>Yet Another Section</h1>
-      <p>More text</p>
-    </section>
-  </div>
+  <body>
+    <script src="directory/filename.js"></script>
+    <div class="body" role="main">
+      <script>
+        console.log('dynamic');
+      </script>
+      <style>
+        div.body p.centered {
+          text-align: center;
+          margin-top: 25px;
+        }
+      </style>
+      <!-- main content -->
+      <section id="getting-started">
+        <h1>Getting Started</h1>
+        <p>Some text</p>
+      </section>
+      <section id="other-section">
+        <h1>Other Section</h1>
+        <p>Other text</p>
+      </section>
+      <section id="yet-another-section">
+        <h1>Yet Another Section</h1>
+        <p>More text</p>
+      </section>
+    </div>
+  </body>
   </html>`;
 
   it("basic case", () => {
