locked
Want to extract all inner text and link from td's content RRS feed

  • Question

  • User264732274 posted

    here is my sample td's content.

    <table id='test' border=1><tr><td>hello....</td></tr>
    <tfoot>
    <tr class="webgrid-footer">
        <td colspan="6">1
            <a href="Show3.html" >2</a>
            <a href="Show3.html" >3</a>
            <a href="Show3.html" >4</a>
            <a href="Show3.html" >&gt;</a>
            <a href="Show3.html" >&gt;&gt;</a>
        </td>
    </tr>
    </tfoot>
    </table>

    my objective is to extract inner text from html element....like

    1 or 2 or &gt; or &gt;&gt;

    this script i am using to get inner text...i am bit close but still not giving right result. so please anyone has a look and give me rectified code.

    function getOuterHtml($el){
        var wrapper = document.createElement('div');
        wrapper.appendChild($el[0].cloneNode(true));
        return wrapper.innerHTML;
    } 
    
    var $elements = $('.webgrid-footer td').contents()
    .filter(function() 
    {
      return (this.nodeType === 3 && $.trim(this.nodeValue) !== '')
             || this.nodeType === 1;
    });  
    
    var $div = $('<div id="content" />');
    var $list = $('<ul />');
    var strData='';
    
    $elements.each(function(){
        if($(this).html()===null)
        {
            alert(getOuterHtml($(this)));
        }
        else
        {
            alert(getOuterHtml($(this)));
        }
        var $item = $('<li />').append($(this));      
        $list.append($item);
    });
    $div.append($list);
    //alert(strData);
    $('#dv').append($div)
     

    here is js fiddle link https://jsfiddle.net/tridip/ab69osqu/

    looking for suggestion. thanks

    Monday, December 28, 2015 5:38 PM

Answers

  • User475983607 posted

    The requirement is not very clear nor is the problem you are trying to solve. It seems like you are converting markup to a another HTML format on the client.  IMHO, that's a bit odd since the whole purpose of server side code, like ASP, is to generate dynamic HTML.  Is there any reason why you don't pass the HTML to the client in the preferred format rather than converting it when it gets to the client?  Otherwise explain what you're trying to do at a high level.

    Anyway, the following code snippet extracts all the text within the <td> tag and pushes the text to an array.  You can decide what to do with the array from there.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
            <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
        <script type="text/javascript" language="javascript">
            $(document).ready(function () {
    
                $('#Button1').click(function () {
    
                    var footerTextArray = [];
                    var num = '';
    
                    //Big old string
                    var chars = $('.webgrid-footer td').html();
                    for (var i = 0; i < chars.length; i++) {
                        //Stop if we find a <
                        if (chars[i] == '<')
                            break;
                        //Concatenate if we find a number
                        if (chars[i] >= '0' && chars[i] <= '9') {
                            num += chars[i];
                        }
                    }
    
                    //Push the number we found in the <td>
                    footerTextArray.push(num);
    
                    //Easy just grab the text within the anchor
                    $('.webgrid-footer td a').each(function (index, item) {
                        footerTextArray.push($(item).text());
                    });
    
                    console.log(footerTextArray);
                });
            });
        </script>
    </head>
    <body>
        <table id='test' border="1">
            <tr>
                <td>
                    hello....
                </td>
            </tr>
            <tfoot>
                <tr class="webgrid-footer">
                    <td colspan="6">
                        1 
                        <a href="Show3.html">2</a> 
                        <a href="Show3.html">3</a> 
                        <a href="Show3.html">4</a>
                        <a href="Show3.html">&gt;</a> 
                        <a href="Show3.html">&gt;&gt;</a>
                    </td>
                </tr>
            </tfoot>
        </table>
         <input id="Button1" type="button" value="button" />
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 28, 2015 6:44 PM