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

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

for循环中的条件永远为真。我永远比我小加上一些东西...

Answer 2

你的大部分时间都在那里，我不确定我是否完全理解你想要做什么，但你的 for 循环实际上并没有多次查找文本。加上 indexOf 将 return <0 如果它什么也没找到。

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

实际问题

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

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。因此，如果找不到更多 John，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" />

What would be the best practice to achieve something like this without using regex

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 循环使逻辑更易读、更清晰。此外，您可以在循环内部有足够的注释来解释逻辑，即使它有点难以理解:-)

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

Finding text in string, storing it on array and displaying it

javascript

arrays

for-loop

indexof