Question

我希望这段代码用我的笑脸表情符号替换所有':)。虽然当我运行代码时，我得到Uncaught TypeError: Cannot read property 'replace' of undefined at ?v=0.02:10任何帮助都将非常感谢！

代码：

<!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>

Answer 1

替换

document.getElementsByTagName("html").innerHTML

与

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

as getElementsByTagName返回一个数组。

此外，string.replace()方法返回一个新字符串，而不会改变/修改给定的字符串。您需要将返回的字符串重新分配给html = html.replace(...)。

此外，您需要将<script>移至底部。否则，它无法访问HTML文档中显示在其下方的DOM元素，例如<h1>元素：

<!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>

另见How to get the <html> tag HTML with JavaScript / jQuery?

有关更换DOM中文本的更强大方法，请参阅jQuery replace all occurrences of a string in an html page

Answer 2

您的代码和您要解决的问题正在做不同的事情。这将为您提供所需的解决方案，即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>

<强>赞成

表情符号将根据使用的字体调整大小。
替换所有出现的模式

<强> CONS

如果您的html正文中有内联脚本，则每次调用函数replaceTextByImage时都可以重新执行该脚本，因为它正在设置正文的innerHTML。

Answer 3

如果您想使用jquery，请不要阅读此答案。但对于那些可以允许他们的脚本不是jquery的人，这是你的代码。

＆＃13;

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

＆＃13;

<h1>:) Test</h1>

＆＃13;

问题是什么：你正在返回一个数组。使用[0]中的一个元素： document.getElementsByTagName（＆＃34; html＆＃34;）[0] .innerHTML = html;

JavaScript替换函数发出错误

3 个答案: