如何在HTML中显示数组多匹配值？JS innerText单结果问题排查

你的核心问题出在两个地方：一是每次给innerText赋值时直接覆盖了之前的内容，二是内层循环的条件写错了，同时还有一些可以优化的点。下面是修正后的代码和详细说明：

修正后的代码 #

const wordCheckOutput = document.getElementById("word-check-output");

let wordsToCheckFor = ['the', 'a', 'ensure', 'when'];
let sampleString = 'This is a sample string to ensure the code is working.'

function wordCheck() {
    // 提前把字符串分割成单词数组，避免循环里重复split，提升效率
    const sampleWords = sampleString.split(' ');
    // 用数组收集所有匹配结果
    const matchedWords = [];

    for (let i = 0; i < wordsToCheckFor.length; i++) {
        // 内层循环条件改为数组长度，之前的写法完全错误
        for (let j = 0; j < sampleWords.length; j++) {
            if (wordsToCheckFor[i] === sampleWords[j]) {
                matchedWords.push(wordsToCheckFor[i]);
                console.log(wordsToCheckFor[i]);
            }
        }
    }

    // 把匹配结果数组转成字符串，用逗号+空格分隔，设置给innerText
    wordCheckOutput.innerText = matchedWords.join(', ');
    // 如果想要每个结果换行，可以用：wordCheckOutput.innerText = matchedWords.join('\n');
}

关键修改点说明 #

1. 避免覆盖innerText：
   原来的wordCheckOutput.innerText = results;会每次把新结果覆盖掉旧的，所以最后只能看到最后一个匹配项。现在先用数组matchedWords收集所有匹配结果，最后一次性把数组转成字符串赋值给innerText。

2. 修正内层循环条件：
   你之前写的j < sampleString.split(' ')[j]完全错误，这是拿数组的第j个元素（字符串）和数字j比较，逻辑不通。应该改为j < sampleWords.length，用数组的长度作为循环终止条件。

3. 优化字符串分割操作：
   把sampleString.split(' ')提前执行并存在变量sampleWords里，避免每次循环都重复分割字符串，提升代码效率。

4. 清理重复变量声明：
   你之前先声明了let i = [];，然后for循环里又let i = 0;，这会导致变量被覆盖，虽然不报错，但属于不良编码习惯，现在去掉了多余的声明。

另外，如果你想让匹配结果更美观，比如每个关键词占一行，可以把join(', ')改成join('\n')，或者用innerHTML配合<br>标签：wordCheckOutput.innerHTML = matchedWords.join('<br>');

内容的提问来源于stack exchange，提问作者Shelby