从Html中提取特定值

Extract specific value from Html

本文关键字：提取 Html      更新时间：2024-04-01

我有下面的html表-

<table cellpadding=0 cellspacing=0><tr><td height=''30'' bgcolor=''#CCCACA''>
<font size=2 face=''Arial'' color=''#000000''><b>&nbsp;Property</b></font>
</td><td bgcolor=''#CCCACA''>
<font size=2 face=''Arial'' color=''#000000''><b>&nbsp;Value</b></font>
</td></tr><tr><td bgcolor=''white'' width=''200'' height=''20''>
<font size=2 face=''Arial''>&nbsp;First Name</font>
</td><td bgcolor=''white'' width=''300''>
<font size=2 face=''Arial''>&nbsp;John</font>
</td></tr><tr><td bgcolor=''#F3EFEF'' width=''200'' height=''20''>
<font size=2 face=''Arial''>&nbsp;Contact</font>
</td><td bgcolor=''#F3EFEF'' width=''300''>
<font size=2 face=''Arial''>&nbsp;number</font>
</td></tr><tr><td bgcolor=''white'' width=''200'' height=''20''>
<font size=2 face=''Arial''>&nbsp;Last Name</font>
</td><td bgcolor=''white'' width=''300''><font size=2 face=''Arial''>&nbsp;Smith</font>
</td></tr></tr></table>

我希望使用Javascript中的正则表达式从代码中提取number值。我的问题是，在表中的每个值之前，代码行-

<font size=2 face=''Arial''>&nbsp;

存在，因此我不能将其局限于一个值。但是，我知道number值将出现在上述行的每一个第6个实例之后。我知道正则表达式可以提取&nbsp之后的值，但始终不确定如何1。实现这一点并2。获取第6个值。

编辑

function showProperties2(){
var itemID = new String(objChart.getSelectedElements());
var props = new String(objChart.getItemsPropertyIDs(itemID));
var arrPropIDs = props.split(',');
var propertyHTML="<table cellpadding=0 cellspacing=0><tr><td height='30' bgcolor='#CCCACA'><font size=2 face='Arial' color='#000000'><b>&nbsp;Property</b></font></td><td bgcolor='#CCCACA'><font size=2 face='Arial' color='#000000'><b>&nbsp;Value</b></font></td></tr>";
var bgcolor="#F3EFEF";
var i=0;
for(i=0;i<arrPropIDs.length;i++){
    if(objChart.getPropertyValue(itemID, arrPropIDs[i])!=""){
        if(bgcolor=="#F3EFEF"){
            bgcolor = "white";
        }else{
            bgcolor = "#F3EFEF";
        }
        propertyHTML+="<tr><td bgcolor='"+bgcolor+"' width='200' height='20'>";
        propertyHTML+= "<font size=2 face='Arial' class='quack'>&nbsp;"+objChart.getPropertyDisplayName(itemID, arrPropIDs[i])+"</font>";
        propertyHTML+="</td><td bgcolor='"+bgcolor+"' width='300'>";
        propertyHTML+= "<font size=2 face='Arial' class='quack2'>&nbsp;"+objChart.getPropertyValue(itemID, arrPropIDs[i])+"</font>";
        propertyHTML+="</td></tr>";
    }
}
propertyHTML+="</tr></table>";
propertyWindow(propertyHTML, "Properties");

}

前一个是我如何构建我的表。

如果您不介意使用jQuery，这可能会在中工作

function getNumber(table) {
    // Set the variable, tableNumber to an error message of sorts
    var tableNumber = "No number found";
    // Loop through all cells
    $(table + ' td').each(function(){
        $(this).css('background', 'red');
        // Tell if a cell contains the text, '&nbsp;Contact'
        if ($(this).text().indexOf('Contact') != -1) {
            // set the variable tableNumber to the text of the next cell
            tableNumber = $(this).next().text();
        }
    });
        return tableNumber;

}
var report = getNumber('#number-table'); //for debugging
alert(report); //for debugging

然后调用getNumber（$（'#table-id'））之类的函数，或者如果页面上没有id并且只有一个表，则只调用getNumber。

jsFiddle：http://jsfiddle.net/5Ggnz/1/

如果HTML文档格式良好，解析它的麻烦就会小很多。首先，您应该阅读HTML和CSS。使用W3C验证器来发现代码格式中的错误&你可以做什么不同。通过将样式和格式分离，您应该能够使HTML更加干净，例如：

<table cellpadding="0" cellspacing="0">
     <tr class="odd">
         <th>Property</th>
         <th>Value</th>
     </tr>
     <tr class="even">
          <td>First Name</td>
          <td>John</td>
     </tr>
     <tr class="odd">
          <td>Contact</td>
          <td>number</td>
     </tr>
     <tr class="even">
          <td>Last Name</td>
          <td>Smith</td>
     </tr>
</table>
<style>
    td {
        color: #000;
        font: Arial;
        font-size: 0.8em;
        height: 20px;
        width: 300px;
        padding-left: 5px;
    }
    th {
        background-color: #CCCACA;
        font-size: 0.8em;
        height: 30px;
        text-align: left;
        padding-left: 5px;
    }
    .even td {
        background-color: white;
    }
    .odd td {
        background-color: #F3EFEF;
    }
    tr td:first-child {
        width: 200px;
    }
</style>

（目前，尽管你指定了灰色的色调，但由于你正在进行的逃逸，这张表对我来说是蓝色和绿松石色的。）

然后，针对表中每个"数字"单元格的最简单方法是给它们一个不同的类：

<tr>
    <td>Contact</td>
    <td class="phoneNumber">(01) 234 5678</td>
</tr>

然后，您可以使用document.getElementsByClassName("phoneNumber")在JavaScript中实现此目标，或者如果您使用的是jQuery:$(".phoneNumber")。

相关文章：