如何从导入的XML数据中删除不需要的空格加载到javascript中

时间:2013-12-03 08:34:12

标签: javascript xml

我已经看到了类似的问题和答案,但我的空间与我见过的其他问题处于不同的位置。

我将员工数据库中的数据导出到XML文件中,然后通过javascript加载到HTML中。

下面是如何从员工数据库中检索XML数据的示例切片。

<employee>
     <id>2552      </id>
     <name>BOBBY                LEE              </name>
     <team>BOB  </team>
     <datein>      78130</datein>
     <timein> 055541    </timein>
     <dateout>     78129</dateout> 
     <timeout> 140128</timeout>
      <active>Yes</active>
</employee>

如您所见,提取的数据中有空格。我正在使用员工ID来提取图像文件。所以对于这个员工,我会使用id(2552)虽然因为它有6个空格我无法调用图像文件(2552 .png)因为它不起作用。

有没有办法可以删除6个空格,以便我可以加载一个名为2552.png的文件?

感谢。

编辑#1

var x = xmlDoc.getElementsByTagName("employee");

for (i = 0; i < 4; i++)
{
    document.write("<table border='0'>");
    document.write("<tr><td id=pic><img src=../images/employees/");
    document.write(x[i].getElementsByTagName("id")[0].childNodes[0].nodeValue);
    document.write(".png width=100 height=100></td><td id=Yes>");
    document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
    document.write("</td></tr>");
    document.write("</table>");
}

这是我用来从XML文件中提取信息的代码。

编辑#2

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "DATA.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;

XML加载代码,存储在标题中。

2 个答案:

答案 0 :(得分:2)

为什么不使用replace函数?

var str = "<your>xml    </your>"
str = str.replace(/\s+/g, ' '); // Keep only one space character
str = str.replace(/>\s*/g, '>');  // Remove space after >
str = str.replace(/\s*</g, '<');  // Remove space before <

这是jsFiddle

最后,你想要的是修剪一个字符串并用一个空格替换多个空格:

function trimMyNode(str){
   str = str.replace(/\s+/g, ' '); // Keep only one space character
   str = str.trim();
   return str;
}

for (i = 0; i < 4; i++){
  document.write("<table border='0'>");
  document.write("<tr><td id=pic><img src=../images/employees/");
  document.write(trimMyNode(x[i].getElementsByTagName("id")[0].childNodes[0].nodeValue));
  document.write(".png width=100 height=100></td><td id=Yes>");
  document.write(trimMyNode(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue));
  document.write("</td></tr>");
  document.write("</table>");
}

这是另一个jsFiddle

答案 1 :(得分:0)

如果你使用jQuery 进行调用,为什么不在你的ajax调用中尝试这样的事情:

$(this).text($(this).text().replace(/\s+/g, ' ').trim());

ajax调用看起来应该是这样的:

$.ajax({
    type: 'get',
    url: 'data.xml',
    dataType: 'xml',
    success: function(response) {
        $(response).find('employee').each(function() {
            $(this).text($(this).text().replace(/\s+/g, ' ').trim());
        }
        // ... return final item
    }
});