在项目中碰到一个问题，就是JavaScript拼接html标签时，里面特殊字符会有些问题，比如单引号截断配对，导致后面的内容不显示或显示错误。在此记录一下。

　　下面贴一段简化的代码，若有描述不清的地方还请各位指正，共同进步。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

 </head>

 <body>

     <div style="height: 300px; width: 520px; border: 1px solid gray;">

         <label id="content">  </label>

             <p>title值</p>

         <div style="height: 100px; width: 520px; border: 1px solid red;">

         <label id="contentRight"></label>

         <p>正确的<br />title </p>

           </div>  

         <label id="contentError"></label>

         <p>错误的<br />title </p>

     </div>

     <script src="jquery-1.7.2.min.js"></script>

     <script src="encodeF.js"></script>

 </body>

 </html>

html

用的的js文件也很简单，见下面代码：

 $(function()

 {

     ////拼接字符串值。

     var value="~!@#$%^&*()_+`-=[]{};'\:\"|,./<>?";

     ////存储div原来的内容，以便后期处理，此处我们只是显示拼接字符串的值。

     var oldStr;

     ////加转换过的title

     var rightStr;

     ////加未处理拼接字符的title

     var errorStr;

     oldStr=$("#content").html();

     oldStr= oldStr+value;

     rightStr=  "<p title='" + escapeHtml(value) + "'>rightStr1</p>" ;

     errorStr= "<p title='" +value + "'>errorStr1</p>" ;

     ////显示

     $("#contentRight").html(rightStr);

     $("#contentError").html(errorStr);

     $("#content").html(oldStr);

 })

     ////HTML实体编码:应对特殊字符

 function escapeHtml(string) {

     var entityMap = {

         "&": "&amp;",

         "<": "&lt;",

         ">": "&gt;",

         '"': '"',

         "'": ''',

         "\\": '\',

         "/": '/'

     };

     return String(string).replace(/[&<>\"\'\/]/g, function (s) {

         return entityMap[s];

     });

 }

encodeF.js

具体效果图见下图，正确输出是左边的rightStr1上的title，右面显示的是截断的title，并导致页面元素显示错误，多出了“ ?'>’ ”这三个字符：

JavaScript拼接html字符串时截断问题的更多相关文章

  1. Javascript拼接HTML字符串的方法列举及思路

    转载过来,去掉一些废话吧. 目标: 方便的拼接字符串,不使用让人眼晕的+＝.使用过程如下: 1,先创建一个作为“模板”的字符串,如:’My name is ${name},I\’m ${age}.’ ...

  2. JavaScript如何实现字符串拼接操作

    实际应用中,目标字符串的生成可能需要多个数据的拼接. 由于应用频繁,几乎是所有编程语言都必须掌握的操作,当然每种语言具有各自特点. 本文将通过代码实例详细介绍一下JavaScript如何实现字符串拼接 ...

  3. javascript中对字符串的操作总结

    原文:javascript中对字符串的操作总结 没听过一句话吗?程序员的世界,不处理字符串就是处理数组.这是群里的一位前辈和我说的,显然这和我之前理解的DOM是javascript的核心的不同的,看了 ...

  4. 基于easyui框架中input 类型的checkbox拼接成字符串存入数据库和读取选中---善良公社项目

    项目中我做修改用户个人资料的时候,有一个需求是帮助人员的帮助类型如图下所示: 当初想如果是asp.net控件的话应该很简单实现,如果不是基于easyUI框架那就太简单了,现在是受框架的限制与是前端ht ...

  5. JavaScript基础——处理字符串

    String对象是迄今为止在JavaScript中最常用的对象.在你定义一个字符串数据类型的变量的任何时候,JavaScript就自定为你创建一个String对象.例如: var myStr = &q ...

  6. JavaScript复习笔记——字符串

    String构造器可以使用new调用,也可以不使用,但是,这两种调用的结果也是完全不一样的.用new调用的时候,String作为构造器函数,创建字符串对象.不使用new的时候,String用作一个常规 ...

  7. ASP.NET开发在JavaScript有中文汉字时出现乱码时简单有效的解决

    一般情况在使用ASP.NET开发使用JavaScript有中文汉字时不会出现乱码情况,比如:alert('您看到我了吗?');这样直接输入中文汉字的代码中是不会出现乱码的,如果出现了,一是检查Web. ...

  8. java.text.MessageFormat格式化字符串时的小技巧

    java.text.MessageFormat格式化字符串时的小技巧 public static void main(String[] args) throws InterruptedExceptio ...

  9. javascript中的字符串对象和数组对象

    1.javascript的对象的概念 在javascript中,除了null和undefined以处,其他的数据类型都被定义成了对象 也可以用创建对象的方法定义变量,string,math,array ...

随机推荐

  1. Java插件之Jrebel

    Jrebel是干嘛的?当你在Java Web的项目中修改一些代码的时候(成员代码),想要生效必须重启服务器.但是每次修改代码都得重启服务器?重启着时间很长的,太麻烦了. Jrebel隆重出场,它可以使 ...

  2. python 有趣的库练习

    这里会将看到别人玩过有趣的实践并记录下来,会是一个长期更新的过程... 以下大部分均非原创变化自网络,只是觉得有趣便记录下来了,如有侵权,请告知删除... 自动化脚本... 20个必不可少的Pytho ...

  3. cxf与spring的整合

    cxf与spring的整合: 一:服务端相关配置(配置好后启动tomocat就自动发布了接口,浏览器打开验证下) 1:导入cxf以及spring的相关jar包; 2:在web.xml中增加配置: 代码 ...

  4. 【转载】C# List用法 List介绍

    https://www.cnblogs.com/dyhao/p/9501479.html

  5. windows生成dump文件

    windows下程序有时突然崩溃了,偶发性的崩溃很难找.于是就需要保存崩溃时的dump信息了. 下面是关于如何生成dmp文件的代码. 头文件 #pragma once #include <win ...

  6. Android开发最强模拟器Genymotion的安装及使用教程。附注释图详解

    前沿   呵呵,笔者第一次在公开的博客网站写心得,想让自己的Android开发生涯留下点足迹,并且为自己做点笔记,如果该文章能帮到广大的Android小白朋友最好了(其实我也是一小白,(●'◡'●)) ...

  7. zookeeper windows伪集群搭建

    1.下载zookeeper http://mirror.bit.edu.cn/apache/zookeeper/ 解压后,目录重命名为zookeeper1,进入 conf目录,把zoo_sample. ...

  8. Python之进程 3 - 进程池和multiprocess.Poll

    一.为什么要有进程池? 在程序实际处理问题过程中,忙时会有成千上万的任务需要被执行,闲时可能只有零星任务.那么在成千上万个任务需要被执行的时候,我们就需要去创建成千上万个进程么?首先,创建进程需要消耗 ...

  9. xtrabackup 在线主从搭建

    因为意外导致某个MySQL的从服务器宕机,且不可修复,因为是业务数据库,不能停机和锁表进行从库的搭建,所以考虑了使用xtrabackup 进行在线主从搭建. 一.数据库环境 注意:  主从搭建主库一定 ...

  10. Tomcat多应用启动报错:org.apache.catalina.loader.WebappClassLoaderBase.checkStateForResourceLoading Illegal access: this web application instance has been stopped already. Could not load [].

    Loaded org.apache.tomcat.util.net.NioBlockingSelector$BlockPoller$RunnableRemove from .M22/lib/tomca ...