在字符串中查找文本，将其存储在数组中并显示它

Question

我正在尝试在字符串内容中查找字符串，并将找到的内容逐字母推送到数组中，并在 html 中显示所有找到的内容。但是 for 循环似乎有问题（不要运行它会崩溃）。在不使用正则表达式的情况下实现这样的最佳实践是什么。代码位于下方。

var text = "asdas John asd asda sdas dasd asd Jon asdas das dasdas dasdasdasda sadas John jsadjasd";
var hits = [];
var myName = "John";


for (var i = text.indexOf("John"); i < (i + myName.length); i++) {
    hits.push(text[i]);
}


if (hits.length === 0) {
    document.getElementById("result").innerHTML = "not found";
} else {
    document.getElementById("result").innerHTML = hits.toString();
}

Answer 1

实际问题

一个正数与其他正数相加时，总是小于同一个数。所以，

i < (i + myName.length)

将始终为真，因为i 有一个正值6，它是John 第一次出现的索引。因此，您的程序会陷入无限循环。

---

解决方案

要解决这个问题，你可以利用Array.prototype.indexOf中的第二个参数，像这样

for(var i = text.indexOf("John"); i !== -1; i = text.indexOf("John", i + 1))

现在，您的程序将运行，直到 i 变为 -1。 i = text.indexOf("John", i + 1) 从索引i + 1 中找到John 并将其分配回i。因此，如果找不到更多的Johns，i 将是-1，并且循环将中断。

演示

var text = "asdas John asd asda sdas dasd asd Jon asdas" +
  " das dasdas dasdasdasda sadas John jsadjasd";
var hits = [];
var myName = "John";

for (var i = text.indexOf(myName); i !== -1; i = text.indexOf(myName, i + 1)) {
  hits.push(i);
}

if (hits.length === 0) {
  document.getElementById("result").innerHTML = "not found";
} else {
  document.getElementById("result").innerHTML = hits.join("<br />");
}

<pre id="result" />

---

在不使用正则表达式的情况下实现这样的目标的最佳做法是什么

for 循环更适合任何可数循环。每当您想循环直到某个条件为真时，最好的选择是while 循环。

var text = "asdas John asd asda sdas dasd asd Jon asdas" +
  " das dasdas dasdasdasda sadas John jsadjasd";
var hits = [];
var myName = "John";

var i = text.indexOf(myName);

while (i !== -1) {
  hits.push(i);
  // Find index of `myName` from the index `i + 1` and store it back it in `i`
  i = text.indexOf(myName, i + 1);
}

if (hits.length === 0) {
  document.getElementById("result").innerHTML = "not found";
} else {
  document.getElementById("result").innerHTML = hits.join("<br />");
}

<pre id="result" />

现在，while 循环使逻辑更具可读性和清晰性。此外，你可以在循环内有足够多的 cmets 来解释逻辑，即使它有点难以理解:-)

Answer 2

您大部分时间都在那里，我不确定我是否完全理解您要做什么，但您的 for 循环实际上并没有多次查找文本。加上indexOf 将返回

var text="asdas John asd asda sdas dasd asd Jon asdas das dasdas " +
         "dasdasdasda sadas John jsadjasd";
var hits = [];
var myName = "John";

var find = text.indexOf(myName);
while (find >= 0) {
   hits.push(text.substr(find, myName.length));
   find = text.indexOf(myName, find + 1);
}


if (hits.length === 0) {
  document.getElementById("result").innerHTML = "not found"; 
} else {
  document.getElementById("result").innerHTML = hits.toString(); 
}

Answer 3

尝试使用do while 循环

var text = "asdas John asd asda sdas dasd asd Jon asdas das dasdas "        
           + "dasdasdasda sadas John jsadjasd";
    var hits = [];
    var myName = "John";
    var len = myName.length;
    var i = text.indexOf(myName);
    var result = document.getElementById("result");
    
    do {
      // push letters of `myName`
      hits.push(text[i]);
      // increment `i`
      ++i;
    } while(hits.length < len);
    
if (hits.length === 0) {
  result.innerHTML = "not found"; 
} else {
  result.innerHTML = hits.toString(); 
}

<div id="result"></div>

Answer 4

for 循环中的条件将始终为真。 i 永远比 i 小一些……