正则表达式清除空格和html标签中的 空格

假设页面中有一个标签：

<ul>

<li  class="titlename">

<!--

<span>品&nbsp;&nbsp;牌</span> : 日产/尼桑/Nissan//原型（对比）

-->

<span>  品&nbsp;&nbsp;牌    </span> :  日 产 / 尼  桑/N is s an//更改后（添加空格）

</li>

</ul>

从以上标签(更改后)中看出span标签与内容两端隔有‘    ’空格(手写空格)，还有两个&nbsp;空格，包括li的text内容中间也有空格。你我们应该怎样去除首位空格、内容中间空格、&nbsp空格呢？开发需求如下：

1、需求保留文字内的空格，但要清除首位空格：

$('.titlename').innerText.replace(/^\s+|\s+$/g, '');//参数二中的引号最好使用‘单引号’。

清除首尾空格后结果：<span>品&nbsp;&nbsp;牌</span> : 日 产 / 尼  桑/N is s an

2、需求清除前后空格加内容中的空格

$('.titlename').innerText.replace(/[ ]/g, '');

清除内容空格后结果：<span>品&nbsp;&nbsp;牌</span> : 日产/尼桑/Nissan

在上面清除内容空格后我们看到"品牌"内的两个&nbsp;没有清除，那么我们应该如何将&nbsp;表示的空格移除呢？请看方法三。

3、按照上面方法二中的需求清除&nbsp;表示的空格

var liobj=$('.titlename');   //1

varlitext="";   //2

varlilen =liobj.innerHTML;   //3

liobj.innerHTML=liobj.innerHTML.replace(/[ ]|[&nbsp;]/g, '');   //4

litext=liobj.innerText;   //5

liobj.innerHTML=lilen;   //6

示例三中我们来解释一下为什么会使用上面的这种方法来去除&nbsp;呢！

一、浏览器中innerHTML可以理解为没有编译的源码

二、浏览器中innerText可以理解为已经记过编译成了浏览器能够识别的代码

从上面两个逻辑中我们不难看出如果我们使用innerText直接去取值并清除空格的话是没有办法清除以&nbsp;空格的，原因在于&nbsp;在浏览器编译后我们是找不到这个空格的，所以我们就需要考虑使用innerHTML获取没有被浏览器编码的源代码，在源代码中使用“正则表达式”移除空格，此时再去获取innerText中就没有&nbsp;表示的空格了，也就是说这时候页面的样式也是更随着变化了，那么我们最后就需要将没有改变之前的innerHTML赋值给当前的页面作为还原。

代码解答：

标记1、声明变量保存li的初始obj

标记2、声明变量保存li中的innerText值

标记3、声明变量获取初始化li中的innerHTML值（innerHTML值是为被浏览器编译的源代码）

标记4、获取初始化li中的innerHTML值并且利用正则表达式清除&nbsp;最后赋值给浏览器，此时浏览器li中的文字已经发生了变化，没有了&nbsp;

标记5、从新获取页面li的内容innerText，这个时候获取的值中就没有表示&nbsp;的空格符了。并保持在标注2的变量中。

标记6、我们在获取玩li中的值后需要将页面还原成原状态，那怎么还原了，在标注3中我们已经保持了初始化的li的值，此时我们只需要将标注3保持的值赋值给浏览器就可以了。

问题的出现总会有解决的方案，这个问题也困扰了我半天。问题得以解决了要感谢的人还是很多的，感谢那些北大青鸟的学长学姐们，他们有问必答，最终解决这个问题的是湖北武汉北大青鸟鲁广校区的Y2学术主管-赵荣老师。不得不说老师就是老师不到10分钟的时间就解决了我变天的问题。向所有湖北武汉北大青鸟鲁广校区 的老师致敬，是他们将我带到了编程之路。