--- a/browser/base/content/contentSearchUI.js
+++ b/browser/base/content/contentSearchUI.js
@@ -622,22 +622,28 @@ ContentSearchUIController.prototype = {
       this._strings.searchHeader.replace("%S", this.defaultEngine.name)));
   },
 
   _updateSearchWithHeader() {
     if (!this._strings) {
       return;
     }
     let searchWithHeader = document.getElementById("contentSearchSearchWithHeader");
+    let labels = searchWithHeader.querySelectorAll("label");
     if (this.input.value) {
-      // eslint-disable-next-line no-unsanitized/property
-      searchWithHeader.innerHTML = this._strings.searchForSomethingWith;
-      searchWithHeader.querySelector(".contentSearchSearchWithHeaderSearchText").textContent = this.input.value;
+      let header = this._strings.searchForSomethingWith2;
+      // Translators can use both %S and %1$S.
+      header = header.replace("%1$S", "%S").split("%S");
+      labels[0].textContent = header[0];
+      labels[1].textContent = this.input.value;
+      labels[2].textContent = header[1];
     } else {
-      searchWithHeader.textContent = this._strings.searchWithHeader;
+      labels[0].textContent = this._strings.searchWithHeader;
+      labels[1].textContent = "";
+      labels[2].textContent = "";
     }
   },
 
   _speculativeConnect() {
     if (this.defaultEngine) {
       this._sendMsg("SpeculativeConnect", this.defaultEngine.name);
     }
   },
@@ -785,16 +791,23 @@ ContentSearchUIController.prototype = {
     this._table.appendChild(this._oneOffsTable);
 
     headerRow = document.createElementNS(HTML_NS, "tr");
     header = document.createElementNS(HTML_NS, "td");
     headerRow.setAttribute("class", "contentSearchHeaderRow");
     header.setAttribute("class", "contentSearchHeader");
     headerRow.appendChild(header);
     header.id = "contentSearchSearchWithHeader";
+    let start = document.createElement("label");
+    let inputLabel = document.createElement("label");
+    inputLabel.setAttribute("class", "contentSearchSearchWithHeaderSearchText");
+    let end = document.createElement("label");
+    header.appendChild(start);
+    header.appendChild(inputLabel);
+    header.appendChild(end);
     this._oneOffsTable.appendChild(headerRow);
 
     let button = document.createElementNS(HTML_NS, "button");
     button.setAttribute("class", "contentSearchSettingsButton");
     button.classList.add("contentSearchHeaderRow");
     button.classList.add("contentSearchHeader");
     button.id = "contentSearchSettingsButton";
     button.addEventListener("click", this);

--- a/browser/base/content/test/static/browser_misused_characters_in_strings.js
+++ b/browser/base/content/test/static/browser_misused_characters_in_strings.js
@@ -4,20 +4,16 @@
 /* This list allows pre-existing or 'unfixable' issues to remain, while we
  * detect newly occurring issues in shipping files. It is a list of objects
  * specifying conditions under which an error should be ignored.
  *
  * As each issue is found in the whitelist, it is removed from the list. At
  * the end of the test, there is an assertion that all items have been
  * removed from the whitelist, thus ensuring there are no stale entries. */
 let gWhitelist = [{
-    file: "search.properties",
-    key: "searchForSomethingWith",
-    type: "single-quote"
-  }, {
     file: "netError.dtd",
     key: "certerror.introPara",
     type: "single-quote"
   }, {
     file: "netError.dtd",
     key: "inadequateSecurityError.longDesc",
     type: "single-quote"
   }, {

--- a/browser/locales/en-US/chrome/browser/search.properties
+++ b/browser/locales/en-US/chrome/browser/search.properties
@@ -28,25 +28,24 @@ cmd_showSuggestions_accesskey=S
 # menuitem at the bottom of the search panel.
 cmd_addFoundEngine=Add “%S”
 # LOCALIZATION NOTE (cmd_addFoundEngineMenu): When more than 5 engines
 # are offered by a web page, instead of listing all of them in the
 # search panel using the cmd_addFoundEngine string, they will be
 # grouped in a submenu using cmd_addFoundEngineMenu as a label.
 cmd_addFoundEngineMenu=Add search engine
 
-# LOCALIZATION NOTE (searchForSomethingWith):
+# LOCALIZATION NOTE (searchForSomethingWith2):
 # This string is used to build the header above the list of one-click
 # search providers:  "Search for <user-typed string> with:"
-# NB: please leave the <span> and its class exactly as it is in English.
-searchForSomethingWith=Search for <span class='contentSearchSearchWithHeaderSearchText'></span> with:
+searchForSomethingWith2=Search for %S with:
 
 # LOCALIZATION NOTE (searchWithHeader):
 # The wording of this string should be as close as possible to
-# searchForSomethingWith. This string will be used when the user
+# searchForSomethingWith2. This string will be used when the user
 # has not typed anything.
 searchWithHeader=Search with:
 
 # LOCALIZATION NOTE (searchSettings):
 # This is the label for the button that opens Search preferences.
 searchSettings=Change Search Settings
 
 # LOCALIZATION NOTE (searchReset.intro):

--- a/browser/modules/ContentSearch.jsm
+++ b/browser/modules/ContentSearch.jsm
@@ -113,17 +113,17 @@ var ContentSearch = {
   },
 
   get searchSuggestionUIStrings() {
     if (this._searchSuggestionUIStrings) {
       return this._searchSuggestionUIStrings;
     }
     this._searchSuggestionUIStrings = {};
     let searchBundle = Services.strings.createBundle("chrome://browser/locale/search.properties");
-    let stringNames = ["searchHeader", "searchForSomethingWith",
+    let stringNames = ["searchHeader", "searchForSomethingWith2",
                        "searchWithHeader", "searchSettings"];
 
     for (let name of stringNames) {
       this._searchSuggestionUIStrings[name] = searchBundle.GetStringFromName(name);
     }
     return this._searchSuggestionUIStrings;
   },