javascript - 在没有正则表达式的 JavaScript 中，不区分大小写的字符串全部替换

Question

我想在 JavaScript 中执行不区分大小写的字符串全部替换，而不使用正则表达式(或在调用替换方法时使用正则表达式样式的字符串)。我找不到这方面的问题或答案，但如果我错过了，请链接它。

例如，将“abc”替换为“x”:

Find aBc&def stuff ABCabc 变为 Find x&def stuff xx

结果应保留未替换部分的原始大小写。

字符串中可能包含特殊字符，所以这就是我避免使用正则表达式的原因。我的特定问题可能可以用正则表达式解决，但我有兴趣完全避免它。

有几个使用正则表达式的问题和答案，包括对特殊字符的处理。特别是，bobince 在这里的回答 https://stackoverflow.com/a/280837/292060描述了如果不知道原始字符串中的特定条件或根据特定条件采取行动是不可能的。

我认为它会涉及一个循环和 indexOf，遍历原始字符串，构建一个结果。

为了这个问题，假设性能不是主要问题。例如，可以循环字符。

有一些现有的问题包括所有答案的正则表达式:

• Case insensitive string replacement in JavaScript?
• javascript replace all with case insensitive and keeping correct case in original string
• Case insensitive replace all

编辑:
从一些答案中，一些澄清——我最初没有指定这些，但它们是典型的搜索/替换行为:

可以替换为相同的字符串，例如，将'abc'替换为'Abc'，比如修复名称的标题大小写。

不应重新检查替换，例如，将“ab”替换为“abc”应该可以。例如，在 abcc 中将“abc”替换为“ab”会变成 abc 而不是 ab。

我认为这些归结为应该完成替换，然后在字符串中继续前进，而不是“回头看”。

编辑:这里有一些测试用例，仅供记录。我没有进入空字符串等，可能也应该进行测试。 https://jsfiddle.net/k364st09/1/

("Find aBc&def abc", "abc", "xy")   - Find xy&def xy - general test
("Find aBc&def abc", "abc", "ABC")  - Find ABC&def ABC - replace same test, avoid infinite loop
("Find aBcc&def abc", "abc", "ab")  - Find abc&def ab - "move on" avoid double checking (fails if abcc becomes ab)
("abc def", "abc", "xy")            - xy def - Don't drop last characters.
("abcc def", "abc", "xy")           - xyc def  - Just a mix of "move on" and "don't drop last".

Answer 1

1. 从空字符串开始并复制原始字符串。
2. 在副本中找到要替换的字符串的索引(将它们都设置为小写会使搜索不区分大小写)。
3. 如果它不在副本中，请跳到第 7 步。
4. 添加从副本到索引的所有内容，加上替换。
5. 将副本裁剪到您要替换的部分之后的所有内容。
6. 回到第 2 步。
7. 添加副本的剩余部分。

为了好玩，我创建了一个交互式版本，您可以在其中查看正则表达式和 indexOf 的结果，看看转义正则表达式是否会破坏任何东西。用于转义我从 jQuery UI 获取的正则表达式的方法。如果您将它包含在页面上，则可以使用 $.ui.autocomplete.escapeRegex 找到它。否则，它是一个非常小的函数。

这是非正则表达式函数，但由于交互部分添加了更多代码，我默认隐藏了完整的代码片段。

function insensitiveReplaceAll(original, find, replace) {
  var str = "",
    remainder = original,
    lowFind = find.toLowerCase(),
    idx;

  while ((idx = remainder.toLowerCase().indexOf(lowFind)) !== -1) {
    str += remainder.substr(0, idx) + replace;

    remainder = remainder.substr(idx + find.length);
  }

  return str + remainder;
}

// example call:
insensitiveReplaceAll("Find aBcc&def stuff ABCabc", "abc", "ab");

function insensitiveReplaceAll(original, find, replace) {
  var str = "",
    remainder = original,
    lowFind = find.toLowerCase(),
    idx;

  while ((idx = remainder.toLowerCase().indexOf(lowFind)) !== -1) {
    str += remainder.substr(0, idx) + replace;

    remainder = remainder.substr(idx + find.length);
  }

  return str + remainder;
}

function escapeRegex(value) {
  return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
}

function updateResult() {
  var original = document.getElementById("original").value || "",
    find = document.getElementById("find").value || "",
    replace = document.getElementById("replace").value || "",
    resultEl = document.getElementById("result"),
    regexEl = document.getElementById("regex");

  if (original && find && replace) {
    regexEl.value = original.replace(new RegExp(escapeRegex(find), "gi"), replace);
    resultEl.value = insensitiveReplaceAll(original, find, replace);
  } else {
    regexEl.value = "";
    resultEl.value = "";
  }


}

document.addEventListener("input", updateResult);
window.addEventListener("load", updateResult);

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="input-group input-group-sm">
  <span class="input-group-addon">Original</span>
  <input class="form-control" id="original" value="Find aBcc&def stuff ABCabc" />
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon">Find</span>
  <input class="form-control" id="find" value="abc" />
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon">Replace</span>
  <input class="form-control" id="replace" value="ab" />
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon">Result w/o regex</span>
  <input disabled class="form-control" id="result" />
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon">Result w/ regex</span>
  <input disabled class="form-control" id="regex" />
</div>