CODEWITHSUNDEEP
javascriptjqueryhtml
csf30816
csf30816

Reputation: 129

JavaScript Replace function giving out errors

I want this code to replace all ':)'s with my smiley emoji. Although when I run the code I get Uncaught TypeError: Cannot read property 'replace' of undefined at ?v=0.02:10 any help would be greatly appreciated!

Code:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <title>SVG Emoji</title>
    </head>
    <body>
        <script>
        var html = document.getElementsByTagName("html").innerHTML;
        html.replace(":)", "<img src='https://csf30816.github.io/svg-emoji/emojis/smile.svg'>");
        document.getElementsByTagName("html").innerHTML = html;
        </script>
        <h1>:) Test</h1>
    </body>
</html>

Upvotes: 0

Views: 1020

Answers (3)

EyuelDK
EyuelDK

Reputation: 3189

Your code and the problem you are trying to solve are doing different things. This will give you the solution you are seeking, i.e. replace all ':)'s with my smiley emoji

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

replaceTextByImage(':\\)', 'https://csf30816.github.io/svg-emoji/emojis/smile.svg');
replaceTextByImage(':P', 'https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/1f61b.svg');
replaceTextByImage(':D', 'https://what.thedailywtf.com/plugins/nodebb-plugin-emoji-one/static/images/1f603.svg');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <p>
    Hello World! How are you? :). Do you like this emoji :)
    </p>
    <div style="font-size:50px;">How about now :)</div>
    <div style="font-size:25px">You can also do this :P and this :D now!</div>
  </body>
</html>

PROS

  • Emoji will resize according to font used.
  • Replaces all occurrences of a pattern

CONS

  • If you have an inline script in the body of your html, it may be re-executed every time the function replaceTextByImage is called because it is setting the body's innerHTML.

Upvotes: 2

le_m
le_m

Reputation: 20228

Replace

document.getElementsByTagName("html").innerHTML

with

 document.getElementsByTagName("html")[0].innerHTML

as getElementsByTagName returns an array.

Also, the string.replace() method returns a new string without mutating / modifying the given one. You would need to re-assign the returned string to html = html.replace(...).

Also, you need to move your <script> to the bottom. Otherwise it can't access DOM elements that appear beneath it in your HTML document, such as the <h1> element:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <title>SVG Emoji</title>
    </head>
    <body>
        <h1>:) Test</h1>
        <script>
        var html = document.getElementsByTagName("html")[0].innerHTML;
        html = html.replace(":)", "<img src='https://csf30816.github.io/svg-emoji/emojis/smile.svg'>");
        document.getElementsByTagName("html")[0].innerHTML = html;
        </script>
    </body>
</html>

See also How to get the <html> tag HTML with JavaScript / jQuery?

For a more robust approach to replacing text within the DOM see jQuery replace all occurrences of a string in an html page

Upvotes: 4

JambDev
JambDev

Reputation: 46

If you want to use jquery then don't read this answer. But for those who can allow their script not be jquery, Here is your code.

document.getElementsByTagName("H1")[0].innerHTML = '<img src="https://csf30816.github.io/svg-emoji/emojis/smile.svg">';
<h1>:) Test</h1>

What the problem is: You are returning an array. Use one element with [0]: document.getElementsByTagName("html")[0].innerHTML = html;

Upvotes: 1

Related Questions