突出顯示字符串數組中的部分匹配項 - JavaScript

Question

我正在創建一個小項目，它將遍歷 textarea 元素的內容，從禁止單詞列表中查找單詞並在找到時突出顯示它們。 我已經實現了一個適用於完整單詞的解決方案，但是在邊緣情況下，我遇到了相當麻煩的情況。 以下是該項目的代碼：

const bannedWords = ['treatment', 'cancer', 'allergens'];
document.addEventListener('DOMContentLoaded', () => {
    let checkButton = document.querySelector('.check__btn');
    let textArea = document.querySelector('textarea');

    checkButton.addEventListener('click', (e) => {
        e.preventDefault();
        let inputString = textArea.value.split(" ");
        for (let i = 0; i < inputString.length; i++) {

            if (bannedWords.includes(inputString[i])) {
                inputString[i] = `<mark>${inputString[i]}</mark>`;
            }
        }
        let outputText = document.querySelector('.output__text');
        outputText.innerHTML = inputString.join(" ");

        return false;
    });
});

因此，例如，如果用戶輸入“治療”或“癌症”，它們將不會被突出顯示，因為從技術上講，它們不會出現在列表中。

對此的任何幫助將不勝感激！ 干杯。

Answer 1

我認為您的問題與 vscode 文件搜索的問題非常相似。 當您按 Ctrl+P 並輸入一些文件名時，例如：“numbrepinut”，它仍然會顯示名為 numberInput.js 的文件，因為它具有類似的結果。 請檢查以下鏈接：

1. 在 Visual Studio Code/Google Chrome Developer/Sublime（Ctrl+p 或 Cmd+p）中使用哪種算法實現文件搜索？
2. https://levelup.gitconnected.com/fuzzy-searches-in-vs-code-tips-to-increase-developer-focus-and-productivity-6809c0f3ce9a