What are some ways to effectively utilize a mask for values retrieved from a database?

Question

What are some ways to effectively utilize a mask for values retrieved from a database?

Hello, I am working on fetching data from my database and want to display it in a specific format within my view. Currently, my code is simple with a table displaying the data from the database. However, I need to format a phone number with a mask like this: (12) 94832-3823. I have tried various approaches but so far, no success. Can anyone provide me with some guidance or a hint?

Here is a snippet of my table code:

<table class="table table-bordered" id="example10" width="100%" cellspacing="0">
   <thead>
      <tr>
         <th>{{ __('messages.serial no')}}</th>
         <th>{{ __('messages.Delivery_Boy')}}</th>
         <th>{{ __('messages.Delivery_Boy_Image')}}</th>
         <th>{{ __('messages.Delivery_Boy_Phone')}}</th>
         <th>{{ __('messages.Status')}}</th>
         <th>{{ __('messages.action')}}</th>
      </tr>
      </tfoot>
   <tbody>
      @if(count($delivery_boy)>0)
      @php $i=1; @endphp
      @foreach($delivery_boy as $delivery_boys)
      <tr>
         <td>{{$i}}</td>
         <td>{{$delivery_boys->delivery_boy_name}}</td>
         <td align="center"><img src="{{url($delivery_boys->delivery_boy_image)}}" style="width: 21px;"></td>
         <td>{{$delivery_boys->delivery_boy_phone}}</td>
         <td>
            @if($delivery_boys->is_confirmed==0)
            <a href="{{route('confirm.delivery.status',[$delivery_boys->delivery_boy_id,'1'])}}" class="btn btn-info" style="color: #fff;">Yes</a>
            <a href="{{route('confirm.delivery.status',[$delivery_boys->delivery_boy_id,'2'])}}" class="btn btn-danger" style="color: #fff;">No</a>
            @elseif($delivery_boys->is_confirmed == 1)
            <span style="color:green;">Aprovado</span>
            @else
            <span style="color:red;">Reprovado</span>
            @endif
         </td>
         <td>
            <a href="{{route('edit-delivery_boy',$delivery_boys->delivery_boy_id)}}" style="width: 28px; padding-left: 6px;" class="btn btn-info"  style="width: 10px;padding-left: 9px;" style="color: #fff;"><i class="fa fa-edit" style="width: 10px;"></i></a>
            <button type="button" style="width: 28px; padding-left: 6px;" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal{{$delivery_boys->delivery_boy_id}}"><i class="fa fa-trash"></i></button>
         </td>
      </tr>
      @php $i++; @endphp
      @endforeach
      @else
      <tr>
         <td>No data found</td>
      </tr>
      @endif
   </tbody>
</table>

Current display can be seen at this link: https://i.sstatic.net/2LOpY.png

Thank you for your time!

javascript laravel bootstrap-4

Answer 1

Answer №1

To simplify the process, you can delete the php echo phone and insert fixed text instead. For example: <td>xxx-xxx-xxx</td>.

UPDATE

You have javascript tagged in your question. Here is a Javascript version: The crucial part is the regex pattern. Use this pattern: /(\d{2})(\d{5})(\d+)/

Javascript Example:

function formatPhoneNumber(phoneNumberString) {
  
  var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
  
  var match = cleaned.match(/(\d{2})(\d{5})(\d+)/);  
  if (match) {
    return '(' + match[1] + ') ' + match[2] + '-' + match[3];
  }
  return null;
}

p = "+5511920140349"

console.log( formatPhoneNumber(p) )

Appendix

Replace the line with the phone number from

<td>{{$delivery_boys->delivery_boy_phone}}</td>

to

<td class="phonenumbers">{{$delivery_boys->delivery_boy_phone}}</td>

. Now, you can select and modify the lines using js. Like this:

const nums = document.querySelectorAll('.phonenumber');
console.log(nums)

nums.forEach(td => {
  const p = td.innerHTML;
  td.innerHTML = formatPhoneNumber(p)  
})


function formatPhoneNumber(phoneNumberString) {  
  var cleaned = ('' + phoneNumberString).replace(/\D/g, '');  
  var match = cleaned.match(/(\d{2})(\d{5})(\d+)/);  
  if (match) {
    return '+(' + match[1] + ') ' + match[2] + '-' + match[3];
  }
  return null;
}

<table border="1px">
  <tr>
    <td>abc</td>
    <td class="phonenumber">123456789</td>
  </tr>
  <tr>
    <td>abc</td>
    <td class="phonenumber">123456789</td>
  </tr>
  <tr>
    <td>abc</td>
    <td class="phonenumber">123456789</td>
  </tr>  
</table>

Answer 2

To simplify the process, you can delete the php echo phone and insert fixed text instead. For example: <td>xxx-xxx-xxx</td>.

UPDATE

You have javascript tagged in your question. Here is a Javascript version: The crucial part is the regex pattern. Use this pattern: /(\d{2})(\d{5})(\d+)/

Javascript Example:

function formatPhoneNumber(phoneNumberString) {
  
  var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
  
  var match = cleaned.match(/(\d{2})(\d{5})(\d+)/);  
  if (match) {
    return '(' + match[1] + ') ' + match[2] + '-' + match[3];
  }
  return null;
}

p = "+5511920140349"

console.log( formatPhoneNumber(p) )

Appendix

Replace the line with the phone number from

<td>{{$delivery_boys->delivery_boy_phone}}</td>

to

<td class="phonenumbers">{{$delivery_boys->delivery_boy_phone}}</td>

. Now, you can select and modify the lines using js. Like this:

const nums = document.querySelectorAll('.phonenumber');
console.log(nums)

nums.forEach(td => {
  const p = td.innerHTML;
  td.innerHTML = formatPhoneNumber(p)  
})


function formatPhoneNumber(phoneNumberString) {  
  var cleaned = ('' + phoneNumberString).replace(/\D/g, '');  
  var match = cleaned.match(/(\d{2})(\d{5})(\d+)/);  
  if (match) {
    return '+(' + match[1] + ') ' + match[2] + '-' + match[3];
  }
  return null;
}

<table border="1px">
  <tr>
    <td>abc</td>
    <td class="phonenumber">123456789</td>
  </tr>
  <tr>
    <td>abc</td>
    <td class="phonenumber">123456789</td>
  </tr>
  <tr>
    <td>abc</td>
    <td class="phonenumber">123456789</td>
  </tr>  
</table>

Answer 3

Answer №2

One clever trick you can use is using a regular expression to replace all the numbers with a letter 'X'.

To mask a phone number, you can simply apply this line of code:

preg_replace('/\d/', 'X', '+5511920140349');

Answer 4

One clever trick you can use is using a regular expression to replace all the numbers with a letter 'X'.

To mask a phone number, you can simply apply this line of code:

preg_replace('/\d/', 'X', '+5511920140349');

What are some ways to effectively utilize a mask for values retrieved from a database?

Answer №1

UPDATE

Appendix

Answer №2

Similar questions

Sending data through ajax to PHP on separate pages is a common practice

Is it possible to automatically submit a form at regular intervals without reloading the page and simultaneously insert the submitted data into

Using Selenium to interact with a Modal Dialog window

Prevent double clicking on select tags that are automatically generated

Updating the icon of an action column dynamically in Ext JS4

Monitoring Logfile in Ruby On Rails 3.1

Leveraging node.js to power mobile applications along with an administration panel built using angular

Button-controlled automated presentation

Transferring JSON data from JavaScript to ASP.NET

Display a progress bar on the index page of the grid view

Is utilizing R dygraphs for fractional timestamps possible?

Jquery modal dialog experiencing issues with controls not working properly

The mystery of the missing body in a Node.js post request

Highchart mortgage calculator for accurate financial planning

Using PHP to track the number of clicks on a specific div element

What is the method used for defining an element within an array in JavaScript?

Adaptive grids in Bootstrap

Adjusting the size of SVG rectangle shapes within a group container

Creating Dynamic Where Statements using Sequelize and Multiple OR Conditions

Bootstrap 4 tooltip/popover with automatic fallback placement (utilizing two possible placement options)