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

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

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.  </head>
  6.  <body>
  7.      <div style="height: 300px; width: 520px; border: 1px solid gray;">
  8.          <label id="content">  </label>
  9.              <p>title值</p>
  10.  
  11.          <div style="height: 100px; width: 520px; border: 1px solid red;">
  12.          <label id="contentRight"></label>
  13.          <p>正确的<br />title </p>
  14.            </div>  
  15.  
  16.          <label id="contentError"></label>
  17.          <p>错误的<br />title </p>
  18.      </div>
  19.      <script src="jquery-1.7.2.min.js"></script>
  20.      <script src="encodeF.js"></script>
  21.  </body>
  22.  </html>

html

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

  1.  $(function()
  2.  {
  3.      ////拼接字符串值。
  4.      var value="~!@#$%^&*()_+`-=[]{};'\:\"|,./<>?";
  5.      ////存储div原来的内容，以便后期处理，此处我们只是显示拼接字符串的值。
  6.      var oldStr;
  7.      ////加转换过的title
  8.      var rightStr;
  9.      ////加未处理拼接字符的title
  10.      var errorStr;
  11.  
  12.      oldStr=$("#content").html();
  13.      oldStr= oldStr+value;
  14.      rightStr=  "<p title='" + escapeHtml(value) + "'>rightStr1</p>" ;
  15.      errorStr= "<p title='" +value + "'>errorStr1</p>" ;
  16.      ////显示
  17.      $("#contentRight").html(rightStr);
  18.      $("#contentError").html(errorStr);
  19.      $("#content").html(oldStr);
  20.  })
  21.      ////HTML实体编码:应对特殊字符
  22.  function escapeHtml(string) {
  23.      var entityMap = {
  24.          "&": "&amp;",
  25.          "<": "&lt;",
  26.          ">": "&gt;",
  27.          '"': '"',
  28.          "'": ''',
  29.          "\\": '\',
  30.          "/": '/'
  31.      };
  32.      return String(string).replace(/[&<>\"\'\/]/g, function (s) {
  33.          return entityMap[s];
  34.      });
  35.  }

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. nginx request_time 和upstream_response_time

    1.request_time 官网描述:request processing time in seconds with a milliseconds resolution; time elapsed ...

  2. linux 网络连接数查看方法

    1.查看系统tcp连接中各个状态的连接数. netstat -an|awk '/^tcp/ {++s[$NF]} END {for(a in s ) print a,s[a]}' 2.查看和本机23端 ...

  3. net-snmp开发教程

    目录 1................................................................................................ ...

  4. 【坑】zsh和oh-my-zsh卸载后导致无法登陆

    apt-get remove zsh 然后断开终端,就再也连不上了,崩溃啊! 以下登陆为www用户登陆 各种找,到这里 https://www.cnblogs.com/EasonJim/p/78630 ...

  5. Impala系列: Impala常用的功能函数

    --=======================查看内置的函数--=======================hive 不需要进入什么内置数据库, 即可使用 show functions 命令列出 ...

  6. Android资源重命名

    Android资源比如图片重命名后,Resource里看到的还是之前的名字,可以关掉AndroidStudio,从新打开就正常了

  7. Emmet 记录

    Refs 熟悉 css 有优势,emmet 的的缩写语法特别像 css 选择器. =>参考本博笔记 # id > 直接子元素 child . class + Sibling 同级相邻的一个 ...

  8. 【bzoj 3669】[Noi2014]魔法森林

    Description 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为1..N,边标号为1..M.初始时小E同学在号节 ...

  9. tensorflow/core/kernels/conv_ops.cc:659] check failed: stream->parent()->getc

    tensorflow版本与cudnn版本不对应,如tensorflow-gpu==1.1.0,cudnn==6.0 升级tensorflow-gpu到更高版本

  10. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...