如何用js去除元素之间的空格?

JavaScript012

如何用js去除元素之间的空格?,第1张

取出两个undefined是因为在ff中,会将元素内的换行当成一个空的文本节点来处理。

有两种办法可以忽略掉空的文本节点:

第一种,根据nodeType过滤掉空文本节点:

function getFirstChild(parent) {

    if(parent && parent.nodeType == '1') {

        var node = parent.firstChild

        while(node.nodeType != 1) {

            node = node.nextSibling

        }

        

        return node

    }

}

第二种办法,用children[0]获取第一个节点,比如:

<div id="c">

    <span>first span</span>

</div>

document.getElementById('c').children[0]取到的就是第一个span。

另外,children在IE中会将注释当作节点包含在内,需要注意一下,比如下面这种结构:

<div id="c">

<!-- this is comment -->

<span>Span<span>

</div>

在IE中使用document.getElementById('c').children[0],获取到的是<!-- this is comment -->,而不是<span>Span</span>。

nodeType返回值代表的含义:

返回值    节点类型

1             Element                        元素节点

2             Attr                               属性节点

3             Text                              文本节点

4             CDATASection             <![CDATA[]]>

5             EntityReference           文档中的实体引用部分

6             Entity                           文档中的实体

7             ProcessingInstruction  处理指令

8             Comment                     注释

9             Document                    整个文档(文档根节点)

10           DocumentType            向为文档定义的实体提供接口

11           DocumentFragment    轻量级的 Document 对象,能够容纳文档的某个部分

12           Notation                       代表 DTD 中声明的符号

各类节点的子节点:

节点类型    子节点类型

1                1、3、4、5、7、8

2                3、5

3                无子节点

4                无子节点

5                1、3、4、5、7、8

6                1、3、4、5、7、8

7                无子节点

8                无子节点

9                1、7、8、10

10              无子节点

11              1、3、4、5、7、8

12              无子节点

在JS中,我们经常需要处理字符串,也经常需要去除字符串的空格。

缺陷:通过字符串自带方法,无法去除字符串中间的空格

2.通过RegExp

使用$.trim()也只能出去两端空格

知识点回顾:

String相关

原始值字符串并没有属性和方法,因为他们不是对象。但原始值可以使用 属性和方法,是因为 JavaScript 在执行其方法和属性时经过了包装类

第一种:循环检查替换

[javascript]

//供使用者调用

function trim(s){

return trimRight(trimLeft(s))

}

//去掉左边的空白

function trimLeft(s){

if(s == null) {

return ""

}

var whitespace = new String(" \t\n\r")

var str = new String(s)

if (whitespace.indexOf(str.charAt(0)) != -1) {

var j=0, i = str.length

while (j <i &&whitespace.indexOf(str.charAt(j)) != -1){

j++

}

str = str.substring(j, i)

}

return str

}

//去掉右边的空白 www.2cto.com

function trimRight(s){

if(s == null) return ""

var whitespace = new String(" \t\n\r")

var str = new String(s)

if (whitespace.indexOf(str.charAt(str.length-1)) != -1){

var i = str.length - 1

while (i >= 0 &&whitespace.indexOf(str.charAt(i)) != -1){

i--

}

str = str.substring(0, i+1)

}

return str

}

第二种:正则替换

[javascript]

<SCRIPT LANGUAGE=" Java Script">

</SCRIPT>

第三种:使用jquery

[javascript]

$.trim(str)

jquery内部实现为:

[javascript]

function trim(str){

return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'')

}

第四种:使用motools

[javascript]

function trim(str){

return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, '')

}

第五种:裁剪字符串方式

[javascript]

function trim(str){

str = str.replace(/^(\s|\u00A0)+/,'')

for(var i=str.length-1i>=0i--){

if(/\S/.test(str.charAt(i))){

str = str.substring(0, i+1)

break

}

}

return str

}

经过测试第五种方法在处理长字符串时效率最高。