How do I protect phone number from bots

Question

I want a phone number which display on public page will be protected. Example converts phone number characters to HTML entities and bots can't grab the number in plain text. Let me know the trick.

Answer 1

This is a...passing thought, though I'm not sure how practical it would be:

<span class="protectedNumber" title="01234567890"></span>

css:

span.protectedNumber:before {
    content: "Phone number: " attr(title);
}

JS Fiddle demo.

---

Edited, in response to 'cross browser?' question in comments, to add a jQuery option to assist with those browsers that don't have the ability to deal with css-generated content:

$(document).ready(
    function(){
       $('.protectedNumber').each(
           function(){
               $(this).text('Phone number: ' + $(this).attr('title'));
           }); 
    });

Answer 2

some ideas

• display the phone number as an image
• use javascript to create and display the phone number
• throw in html tags in between the numbers (e.g. [span]) that visually makes no difference but makes it more difficult for the bot to recognize the phone number