JavaScript Replace function giving out errors

Question

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>

I think I have a much more refined answer if you are interested. — EyuelDK, May 20 '17 at 00:22

score 4 · Answer 1 · edited May 23 '17 at 12:03

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

I tried that just now, but it does not replace the `:)` with the image. The `:)` does not disappear and the image does not appear. — csf30816, May 19 '17 at 23:57
@csf30816 I think I fixed all of the errors by now :) - I really recommend the more robust approach I linked to in my answer. — le_m, May 20 '17 at 00:07

EyuelDK · Accepted Answer · 2017-05-20T01:07:35.513

2

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.

edited May 20 '17 at 01:07

answered May 19 '17 at 23:55

EyuelDK

3,029
2
19
27

How could I add a `:D` or `:P` to this? – csf30816 May 20 '17 at 00:28
I tried adding `:D`, `:P`, `:(` and `;)`. But it did not work. – csf30816 May 20 '17 at 00:55
simple error, fixed it. Note that it uses regular expression to match the symbols. – EyuelDK May 20 '17 at 00:56
Thank you so much! – csf30816 May 20 '17 at 01:01
You are welcome, but be ware of the deficiencies in such an approach. This is quick and dirty. I'll update my post to clarify the cons. – EyuelDK May 20 '17 at 01:03
Is there a max of 3 emojis?? – csf30816 May 20 '17 at 01:05
You can replace whatever you want, just call the function I've written with the pattern you want to replace along with the source image. You can replace all vowels if you want. – EyuelDK May 20 '17 at 01:05
Oh I see I forgot the `\\\`` before the `)` and `(`'s thanks again – csf30816 May 20 '17 at 01:09

JambDev · Answer 3 · 2017-05-19T23:57:19.190

1

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;

edited May 19 '17 at 23:57

answered May 19 '17 at 23:51

JambDev

46
1
6

Welcome to SO! Instead of "Use [0]:" I'd say "Access the first and only element by `array[0]`:" - PS: you can format a string as code by wrapping it in backticks: \`this is code\`. – le_m May 19 '17 at 23:55

JavaScript Replace function giving out errors

3 Answers3