JavaScript - Repeat only javascript code


So I have code that repeats my function forever, although when I make that happen the rest of my site repeats itself too. So When I try to type in text box it does not let me. And when I hover over things they blink. How can I fix this?

Code:

window.onload = function () {
  setInterval(function () {
    function replaceTextByImage(pattern, src) {
        document.body.innerHTML = document.body.innerHTML.replace(new RegExp(pattern, 'g'), '<span style="background-size: 100% 100%; background-image: url(\'' + src + '\');">&nbsp&nbsp&nbsp&nbsp</span>');
    }

    console.log("Repeating Emoji Convert");

    // Smile 🙂
    replaceTextByImage(':\\)', 'https://csf30816.github.io/svg-emoji/emojis/smile.svg');
    replaceTextByImage(':smile:', 'https://csf30816.github.io/svg-emoji/emojis/smile.svg');
    replaceTextByImage('🙂', 'https://csf30816.github.io/svg-emoji/emojis/smile.svg');

    // Tongue 😛
    replaceTextByImage(':P', 'https://csf30816.github.io/svg-emoji/emojis/tongue.svg');
    replaceTextByImage(':tongue:', 'https://csf30816.github.io/svg-emoji/emojis/tongue.svg');
    replaceTextByImage('😛', 'https://csf30816.github.io/svg-emoji/emojis/tongue.svg');

    // Big Smile 😀
    replaceTextByImage(':D', 'https://csf30816.github.io/svg-emoji/emojis/big-smile.svg');
    replaceTextByImage(':big-smile:', 'https://csf30816.github.io/svg-emoji/emojis/big-smile.svg');
    replaceTextByImage('😀', 'https://csf30816.github.io/svg-emoji/emojis/big-smile.svg');

    // Frown ☹ 🙁
    replaceTextByImage(':\\(', 'https://csf30816.github.io/svg-emoji/emojis/frown.svg');
    replaceTextByImage(':frown:', 'https://csf30816.github.io/svg-emoji/emojis/frown.svg');
    replaceTextByImage('☹', 'https://csf30816.github.io/svg-emoji/emojis/frown.svg');
    replaceTextByImage('🙁', 'https://csf30816.github.io/svg-emoji/emojis/frown.svg');

    // Wink 😉
    replaceTextByImage(';\\)', 'https://csf30816.github.io/svg-emoji/emojis/wink.svg');
    replaceTextByImage(':wink:', 'https://csf30816.github.io/svg-emoji/emojis/wink.svg');
    replaceTextByImage('😉', 'https://csf30816.github.io/svg-emoji/emojis/wink.svg');

    // Dizzy 😵
    replaceTextByImage('xO', 'https://csf30816.github.io/svg-emoji/emojis/dead.svg');
    replaceTextByImage(':dizzy:', 'https://csf30816.github.io/svg-emoji/emojis/dead.svg');
    replaceTextByImage(':dead:', 'https://csf30816.github.io/svg-emoji/emojis/dead.svg');
    replaceTextByImage('😵', 'https://csf30816.github.io/svg-emoji/emojis/dead.svg');

    // Cry 😭 😢
    replaceTextByImage(':crying:', 'https://csf30816.github.io/svg-emoji/emojis/cry.svg');
    replaceTextByImage(':cry:', 'https://csf30816.github.io/svg-emoji/emojis/cry.svg');
    replaceTextByImage('😭', 'https://csf30816.github.io/svg-emoji/emojis/cry.svg');
    replaceTextByImage('😢', 'https://csf30816.github.io/svg-emoji/emojis/cry.svg');

    // Big Frown 😦
    replaceTextByImage('D:', 'https://csf30816.github.io/svg-emoji/emojis/big-frown.svg');
    replaceTextByImage(':big-frown:', 'https://csf30816.github.io/svg-emoji/emojis/big-frown.svg');
    replaceTextByImage(':gasp:', 'https://csf30816.github.io/svg-emoji/emojis/big-frown.svg');
    replaceTextByImage('😦', 'https://csf30816.github.io/svg-emoji/emojis/big-frown.svg');

    // Heart Eyes 😍
    replaceTextByImage(':heart-eyes:', 'https://csf30816.github.io/svg-emoji/emojis/heart-eyes.svg');
    replaceTextByImage('😍', 'https://csf30816.github.io/svg-emoji/emojis/heart-eyes.svg');

    // Neutral 😐
    replaceTextByImage(':neutral:', 'https://csf30816.github.io/svg-emoji/emojis/neutral.svg');
    replaceTextByImage(':\\|', 'https://csf30816.github.io/svg-emoji/emojis/neutral.svg');
    replaceTextByImage(':plain:', 'https://csf30816.github.io/svg-emoji/emojis/neutral.svg');
    replaceTextByImage('😐', 'https://csf30816.github.io/svg-emoji/emojis/neutral.svg');

    // Raging 😡
    replaceTextByImage(':raging:', 'https://csf30816.github.io/svg-emoji/emojis/raging.svg');
    replaceTextByImage(':angry-red:', 'https://csf30816.github.io/svg-emoji/emojis/raging.svg');
    replaceTextByImage('😡', 'https://csf30816.github.io/svg-emoji/emojis/raging.svg');

    // Mad 😠
    replaceTextByImage(':angry:', 'https://csf30816.github.io/svg-emoji/emojis/mad.svg');
    replaceTextByImage(':mad:', 'https://csf30816.github.io/svg-emoji/emojis/mad.svg');
    replaceTextByImage('😠', 'https://csf30816.github.io/svg-emoji/emojis/mad.svg');

    // Teeth 😁
    replaceTextByImage(':teeth:', 'https://csf30816.github.io/svg-emoji/emojis/teeth.svg');
    replaceTextByImage(':wide-smile:', 'https://csf30816.github.io/svg-emoji/emojis/teeth.svg');
    replaceTextByImage('😁', 'https://csf30816.github.io/svg-emoji/emojis/teeth.svg');

    // Thumbs Up 👍
    replaceTextByImage(':thumbs-up:', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-up.svg');
    replaceTextByImage(':up:', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-up.svg');
    replaceTextByImage('👍', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-up.svg');

    // Thumbs Down 👎
    replaceTextByImage(':thumbs-down:', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-down.svg');
    replaceTextByImage(':down:', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-down.svg');
    replaceTextByImage('👎', 'https://csf30816.github.io/svg-emoji/emojis/thumbs-down.svg');
  }, 300);
};

Answers:


Your jsFiddle is really helpful right off the bat: https://jsfiddle.net/csf30816/gxh4675j/3/

You are innerHTMLing the whole body. Maybe you can just watch the input and change a small specific area of the page.