CODEWITHSUNDEEP
javascripthtmlregex
Ebikeneser
Ebikeneser

Reputation: 2364

Extract specific value from Html

I have the following html table -

<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>

I am looking to use a regular expression in Javascript to extract the number value out of this code. My problem being that before every value in the table the line of code -

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

is present therefore I cannot localise to one value. However I do know that the number value will occur after every 6th instance of the aforementioned line. I am aware a regular expression could extract the values after &nbsp how ever not sure how to 1. Implement this and 2. Get to the 6th value.

EDIT

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");


}

The previous is how I construct my table.

Upvotes: 0

Views: 319

Answers (2)

daveyfaherty
daveyfaherty

Reputation: 4613

If you don't mind using jQuery, this might work

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

Then call the function like getNumber($('#table-id')) or just getNumber($('table')) if there's no id and there's only one table on the page.

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

Upvotes: 1

anotherdave
anotherdave

Reputation: 6754

You'll have a lot less trouble parsing any HTML document if it's well formatted. You should, to begin with, read up on HTML and CSS. Use the W3C validator to spot errors in how your code is formatted & what you could do differently. You should be able to get your HTML much cleaner by separating style and format, like this:

<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>

(At the moment, even though you're specifying shades of grey, the table is rendering for me in blue and turquoise because of the escapes you have going on.)

Then the easiest way to target each "number" cell of your table is to give them a distinct class:

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

You can then target this in JavaScript with document.getElementsByClassName("phoneNumber"), or if you're using jQuery: $(".phoneNumber").

Upvotes: 1

Related Questions