Show only the first and last four digit of a number using JavaScript

Last Reply 6 months ago By pandeyism

Posted 6 months ago

The HTML code is shared here getting from middleware(other side, different database, where I have no access).

I received it and showed this table in "label" in aspx file.  Just showed table in label.(I  was not able to hide "long integer", so i did hide label to hide "long string" then used again table to show table data).

Where I didn't run any loop, not used any "td id" also.

You gave me solution of xml parsing using loop, here need solution like that. Where have with extra requirements as mentioned::

have to show card_no with "a href"  to browse in new link. Also i need to show card_no like "1111******123456"  instead of "1111234567123456".

sample.aspx.cs ::

Mtable.Text = outputM;  

sample.aspx::

<div id="div1" style="display: none;">
       <asp:Label ID="Mtable" runat="server" Text=""></asp:Label>
</div>
var cardNum = document.getElementById('<%= txtmno.ClientID %>').value;
var x = document.getElementById(cardNum + '_CardList').innerHTML;
document.getElementById("mtbl").innerHTML = x;

 

            <table id="01717458720_CardList">
                <tr>
                    <td id="product_type">
                        CREDIT CARD
                    </td>
                    <td id="card_no">
                        1111234567123456
                    </td>
                    <td id="card_status">
                        INACTIVE
                    </td>
                    <td id="acct_no">
                        N/A
                    </td>
                    <td id="name">
                        Mr. X
                    </td>
                </tr>
                <tr>
                    <td id="product_type">
                        DEBIT CARD
                    </td>
                    <td id="card_no">
                        0000000000000000
                    </td>
                    <td id="card_status">
                        ACTIVE
                    </td>
                    <td id="acct_no">
                       55555555555
                    </td>
                    <td id="name">
                        Mrs. Y
                    </td>
                </tr>
                
            </table>
        </body>
        </span>

 

You are viewing reply posted by: pandeyism 6 months ago.
Posted 6 months ago

Hi Alauddin,

Please refer below sample.

HTML

<div>
    <asp:Label ID="lblTable" runat="server"></asp:Label>
</div>
<script type="text/javascript">
    window.onload = function () {
        var table = document.getElementsByTagName("table");
        var trs = table[0].getElementsByTagName('tr');
        for (var i = 0; i < trs.length; i++) {
            var tds = trs[i].getElementsByTagName('td');
            var cardno = tds[1].innerText;
            if (cardno.length > 5) {
                var firstFour = cardno.substr(0, 4);
                var lastFour = cardno.substr(cardno.length - 4, cardno.length);
                var middle = cardno.substr(4, cardno.length - 8).replace(/[0-9]/g, "*");
                var newLink = document.createElement("a");
                newLink.setAttribute("href", "https://www.Test.com/" + cardno);
                text = document.createTextNode(firstFour + middle + lastFour);
                newLink.appendChild(text);
                tds[1].appendChild(newLink);
            }
        }
    }  
</script>

Namespaces

C#

using System;
using System.Text;

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("<table id='01717458720_CardList'>");
        sb.Append("<tr>");
        sb.Append("<td id='product_type'>CREDIT CARD</td>");
        sb.Append("<td id='card_no' abbr='*'>1111234567123456</td>");
        sb.Append("<td id='card_status'>INACTIVE</td>");
        sb.Append("<td id='acct_no'>N/A</td>");
        sb.Append("<td id='name'>Mr. X</td>");
        sb.Append("</tr><tr>");
        sb.Append("<td id='product_type'>DEBIT CARD</td>");
        sb.Append("<td id='card_no'>0000000000000000</td>");
        sb.Append("<td id='card_status'>ACTIVE</td>");
        sb.Append("<td id='acct_no'>55555555555</td>");
        sb.Append("<td id='name'>Mrs. Y</td>");
        sb.Append("</tr></table>");
        lblTable.Text = sb.ToString();
    }
}

Screenshot