Why does it get overlapped after I highlight using jQuery?

I’m trying to highlight the text in HTML and I get the original page to change its form.

. What’s the issue?
This is the code

function highlighter (words) {
    // console.log(words)
    words.forEach(word => {
        var wo = new RegExp(word, "i")
        $('body').html($('body').html().replace(wo, "<span class = 'highlight'>" + word + "</span>"));
    });
}

This could be a problem where you are changing more than intended?
Is there a way that we could run this locally to try and test it?

How are you getting words?

You are right I got the words changed again and again. I could figure out the problem but you can take the code from here