I'm creating a small project which will go through the contents of a textarea element, find words from the banned words list and highlight them if they are found. I've implemented a solution which works for full words, however in the scenario of edge cases, I've run into quite the pickle. Below is the code from the project:

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;
    });
});

So for example, if a user was to input 'treat' or 'cancerous' for example, they won't be highlighted since they technically don't appear in the list.

Any help with this would be appreciated! Cheers.