js中的引号嵌套问题

作者：KING逊咖 | 来源：互联网 | 2023-10-12 18:59

<!DOCTYPEhtml><html><head><metacharsetutf-8><head&g


<html>
  <head>
    <meta charset="utf-8">
  head>
  <body>
    <h3>单引号h3>
    <div id="single_quotes">div>
    <hr/>
    <h3>双引号h3>
    <div id="double_quotes">div>
    <h3>打印区域h3>
    <div id="print_box">div>
  body>
  <script type="text/Javascript" src="jquery-3.0.0.min.js">script>
  <script type="text/Javascript">
 $(function(){
 oneLayerNesting(); //一层嵌套
 twoLayerNesting(); //两层嵌套
 threeLayerNesting(); //三层嵌套
 fourLayerNesting(); //四层嵌套
 });

 function oneLayerNesting(){
 $("#single_quotes").append('
');
 $("#double_quotes").append("
");
 }

 function twoLayerNesting(){
 $("#single_quotes").append('
');
 $("#double_quotes").append("
");
 }

 function threeLayerNesting(){
 var value = "三层嵌套";
 $("#single_quotes").append('');" />');/*错误例子-1-点击报错:ReferenceError: \u4E09\u5C42\u5D4C\u5957 is not defined*/
 $("#double_quotes").append("");/*错误例子-1-点击报错:ReferenceError: \u4E09\u5C42\u5D4C\u5957 is not defined*/

 $("#single_quotes").append('+value+'");" />');/*错误例子-2-显示错误:*/
 $("#double_quotes").append("+value+"');' />");/*错误例子-2-显示错误:*/

 $("#single_quotes").append('+value+'\");" />');/*错误例子-3-显示错误:*/
 $("#double_quotes").append("+value+"\');' />");/*错误例子-3-显示错误:*/

 $("#single_quotes").append('\");" />');/*错误例子-4-显示错误:*/
 $("#double_quotes").append("\,);' />");/*错误例子-4-显示错误:*/

 $("#single_quotes").append(''\');" />');/*正确例子-1*/
 $("#double_quotes").append("");/*正确例子-1*/

 $("#single_quotes").append('
');/*正确例子-2*/
 $("#double_quotes").append("
");/*正确例子-2*/
 }

 function fourLayerNesting(){
 $("#single_quotes").append('\');" />');/*错误例子-1-显示错误:*/
 $("#double_quotes").append("\");' />");/*错误例子-1-显示错误:*/

 //'是单引号的转义符，"是双引号的转义符
 $("#single_quotes").append('\');" />
');/*正确例子*/
 $("#double_quotes").append("
");/*正确例子*/
 }

 function printHtml(html){
 $("#print_box").append(html);
 }

 function printValue(value){
 console.log("value="+value);
 }
 script>
html>

通过以上运行结果可知，在js中的引号嵌套时单引号和双引号是交替使用的，基本规律如下(<=4层)：

- 单引号：' " \' " 单引号 " \' " '
- 双引号：" ' \" ' 双引号 ' \" ' "

当然对于五层以上的嵌套目前还没有什么好的解决方案，不过4层嵌套已经可以解决绝大部分的应用场景了。

推荐阅读

js
分页插件3指定到某一页

前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）html ... [详细]

蜡笔小新 2024-12-27 15:19:01
js
如何使用JavaScript或jQuery检测文本框焦点状态和鼠标悬停事件

本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态，以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]

蜡笔小新 2024-12-27 21:33:33
js
JQuery基础：省市联动与表单验证

本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先，通过change事件监听用户选择的省份，并动态加载对应的城市列表。其次，详细讲解了使用Validation插件进行表单验证的方法，包括内置规则、自定义规则及实时验证功能。 ... [详细]

蜡笔小新 2024-12-27 17:10:48
js
解析JSON格式文本并处理数据

本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本，并进行数据处理和保存。 ... [详细]

蜡笔小新 2024-12-26 16:06:09
settings
编写有趣的VBScript恶作剧脚本

本文将介绍如何编写一些有趣的VBScript脚本，这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例，帮助您了解VBScript的基本语法和功能。 ... [详细]

蜡笔小新 2024-12-28 09:46:23
select
技术分享：从动态网站提取站点密钥的解决方案

本文探讨了如何从动态网站中提取站点密钥，特别是针对验证码（reCAPTCHA）的处理方法。通过结合Selenium和requests库，提供了详细的代码示例和优化建议。 ... [详细]

蜡笔小新 2024-12-28 04:11:47
js
深入理解Cookie与Session会话管理

本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息，以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制，解释其原理及应用场景。 ... [详细]

蜡笔小新 2024-12-27 18:20:43
byte
从 .NET 转 Java 的自学之路：IO 流基础篇

本文详细介绍了 Java 中的 IO 流，包括字节流和字符流的基本概念及其操作方式。探讨了如何处理不同类型的文件数据，并结合编码机制确保字符数据的正确读写。同时，文中还涵盖了装饰设计模式的应用，以及多种常见的 IO 操作实例。 ... [详细]

蜡笔小新 2024-12-26 17:37:25
bit
优化ListView性能

本文深入探讨了如何通过多种技术手段优化ListView的性能，包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]

蜡笔小新 2024-12-28 10:36:30
select
Akka BackoffSupervisor的深入解析与实践

本文详细介绍了Akka中的BackoffSupervisor机制，探讨其在处理持久化失败和Actor重启时的应用。通过具体示例，展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]

蜡笔小新 2024-12-27 15:04:09
select
Android 渐变圆环加载控件实现

本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件，该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]

蜡笔小新 2024-12-27 13:34:19
string
2023年京东Android面试真题解析与经验分享

本文由一位拥有6年Android开发经验的工程师撰写，详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ... [详细]

蜡笔小新 2024-12-26 17:45:48
string
深入解析 HTTP 500 内部服务器错误

本文详细探讨了HTTP 500内部服务器错误的成因、解决方案及其在Web开发中的影响。通过对具体案例的分析，帮助读者理解并解决此类问题。 ... [详细]

蜡笔小新 2024-12-26 16:55:25
js
Python文本处理与可视化：分词及词云生成

本文介绍如何使用Python进行文本处理，包括分词和生成词云图。通过整合多个文本文件、去除停用词并生成词云图，展示文本数据的可视化分析方法。 ... [详细]

蜡笔小新 2024-12-26 08:37:18
case
Scala 实现 UTF-8 编码属性文件读取与克隆

本文介绍如何使用 Scala 以 UTF-8 编码方式读取属性文件，并实现属性文件的克隆功能。通过这种方式，可以确保配置文件在多线程环境下的一致性和高效性。 ... [详细]

蜡笔小新 2024-12-26 08:25:19

KING逊咖

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章