javascript - 从 Html 中提取特定值

Question

我有以下 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");


}

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

Answer 1

如果您不介意使用 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, ' 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($('table')) 之类的函数。

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

Answer 2

如果格式正确，解析任何 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>

然后，您可以使用 JavaScript 在 JavaScript 中定位它document.getElementsByClassName("phoneNumber")，或者如果您使用的是 jQuery: $(".phoneNumber")。