解决innerHTML方法自动把字符串中符号之间的内容解析成标签的问题

最新推荐文章于 2022-11-02 15:23:33 发布

MrDAW

最新推荐文章于 2022-11-02 15:23:33 发布

阅读量1.7k

点赞数 1

文章标签： html java

本文链接：https://blog.csdn.net/MrDAW/article/details/119304445

版权

学习打卡专栏收录该内容

24 篇文章 0 订阅

订阅专栏

文章目录

解决innerHTML方法自动把字符串中符号<>之间的内容解析成标签的问题
- 问题描述
- 解决办法

解决innerHTML方法自动把字符串中符号<>之间的内容解析成标签的问题

问题描述

当使用innerHTML()方法向页面中输出字符串时，该方法会自动将字符串中 < 与 > 两个符号之间的内容当成标签来处理，而不会将字符串输出到页面中。
如：下面的网页文件，当想要使用innerHTML()方法使下面网页文件中的div标签中显示如下字符串

str = "<p>我不是段落标签p，请不要把我解析成p标签</p>,<br>我也不是换行标签，我是字符串";

由于innerHTML()方法会自动识别标签，所以如果使用innerHTML()方法直接向div标签中输出上面的字符串，会显示如下效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q05CWr9t-1627826290875)(C:\Users\Lazy.N.Y.H\AppData\Roaming\Typora\typora-user-images\image-20210726172801629.png)]

可以看出上面字符串中的<p></p>和<br>并没有按照我们的要求被识别成字符串所显示。

<!--在页面中显示未处理过的字符串str-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>
		<div id="box">
            
        </div>
	</body>
    <script>
        str = "<p>我不是段落标签p，请不要把我解析成p标签</p>,<br>我也不是换行标签，我是字符串";
        document.getElementById("box").innerHTML=str;
    </script>
</html>

解决办法

/*通过下面的函数可以将上述问题得到很好地解决*/
function reverse(str){
		str=str.replace(/</g, "\&lt");
		str=str.replace(/>/g, "\&gt");
		return str;
	}

<!--在页面中显示经过特殊处理过的字符串str-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>
		<div id="box">
            
        </div>
	</body>
    <script>
        function reverse(str){
        	str=str.replace(/</g, "\&lt");
        	str=str.replace(/>/g, "\&gt");
        	return str;
     	}
        str = "<p>我不是段落标签p，请不要把我解析成p标签</p>,<br>我也不是换行标签，我是字符串";
        document.getElementById("box").innerHTML=reverse(str);
    </script>
</html>

正确显示结果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4lurDskM-1627826290879)(C:\Users\Lazy.N.Y.H\AppData\Roaming\Typora\typora-user-images\image-20210726173404517.png)]

可见达到了我们的需求，<p></p>和<br>并没有被页面识别成标签所显示出来，而是以字符串的方式被输出在了页面。

6290879)]

可见达到了我们的需求，<p></p>和<br>并没有被页面识别成标签所显示出来，而是以字符串的方式被输出在了页面。

MrDAW

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
解决innerHTML方法自动把字符串中符号之间的内容解析成标签的问题

文章目录解决innerHTML方法自动把字符串中符号<>之间的内容解析成标签的问题问题描述解决办法解决innerHTML方法自动把字符串中符号<>之间的内容解析成标签的问题问题描述当使用innerHTML()方法向页面中输出字符串时，该方法会自动将字符串中 < 与 > 两个符号之间的内容当成标签来处理，而不会将字符串输出到页面中。如：下面的网页文件，当想要使用innerHTML()方法使下面网页文件中的div标签中显示如下字符串str = "<p>我
复制链接

扫一扫