Javascript - regex to remove html elements

grahamor · 14-08-2007 7:13am #1

Hi,

I have the following example code below

<html>
 <table>
   <tr>
     <td>Cell 1</td>
     <td>Cell 2</td>
     <td>Cell 3</td>
   </tr>
 <table>
</html>

I dont have control over the table html that is written out but i need to remove all html tags relating to the table (i.e. <table>,<tr>,<td>) I also need to preserve the contents of the text in the <td> tags. I can then format the text with css

I tried using the javascript match method with a regex but i think the < and > symbols are causing problems in the regex.

Does anyone know how i can search and remove html tags with a regex ?

Thanks

sicruise · 14-08-2007 10:13am

Do you have to use a regex...

Can you not just use

document.getElementsByTagName('td').item(i)

where i is the index var

grahamor · 14-08-2007 8:26pm

OK, maybe i could use that, but how would i remove that element and preserve it's contents ?

I know using the regex is a bit of a hack but i cant think of any other way to do it.

Thanks

sicruise · 14-08-2007 8:47pm

The method above should give you the content less the tags... is that not what you are looking for?

grahamor · 15-08-2007 4:53am

Yes i want the content in the tags but i also want the table,tr,td tags completly removed so they dont affect layout !

dent · 16-08-2007 8:51am

function getTableRows(tableId)
{
    var table = document.getElementById(tableId);
    var tableBody = table.getElementsByTagName("tbody")[0];
    var rows = tableBody.getElementsByTagName("TR");
    return rows;
}

function getTableColumns(tableId)
{
    var table = document.getElementById(tableId);
    var tableBody = table.getElementsByTagName("tbody")[0];
    var columns = tableBody.getElementsByTagName("TD");
    return columns;
    
}

function getTableContent(tableId,rowNum,columnNum)
{
    var table = document.getElementById(tableId);
    var tableBody = table.getElementsByTagName("tbody")[0];
    var row = table.getElementsByTagName("TR")[rowNum];
    var cell = row.getElementsByTagName("TD")[columnNum];
    var myceltext=cell.childNodes[0];
    return myceltext.data
}

function alertColumnsRows(tableId)
{
    var rows = getTableRows(tableId).length;
    var columns = getTableColumns(tableId).length / rows;
    
    for(var i = 0; i < rows; i++)
    {
        for(var x = 0; x < columns; x++)
        {
            alert(getTableContent(tableId,i,x));
        }
    }
}

Calling alertColumnsRows(tableId) will alert the contents of the table, all you would have to do is append the content in a variable with whatever html tags you want.

You could then write that to the screen and kill the table.

(Note on above code, pass in element returned from getElementById() as this will improve performance)

Javascript - regex to remove html elements

Comments