Convert a number into a name

JavaScript
1

For example, I have <span id=“convert”>1</span> somewhere on my page.
Notice the “1”, I want to covert “1” into let’s say “John” every time the “1” is within a span tag with “convert” as the id.

I also want “2” to be converted to “Pete”. And “3” to be converted to “Bob”.

So if my html is:

<span id=“convert”>1</span>
<span id=“convert”>2</span>
<span id=“convert”>3</span>

my page reads:

John
Pete
Bob

Anyone know how to do this?

2

Have a look at the following fiddle, i threw it together quickly so it can be optimized if needed.

3

Thank you for your help SgtLegend. It must not be a popup though.
For example, you can use it in a sentence on your page:

<p><span class=“convert”>1</span> is walking through the streets of New York.</p>

Which converts into the following text on your page:
John is walking through the streets of New York.

4

I have updated the jsFiddle so now it updates the HTML rather then using an alert box.

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

5

I´ve tested your code. There seems to be something wrong with it though. If I use this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Convert Number to Name</title>
</head>

<body>


<!-- Convert Number to Name -->
<script type="text/javascript">
window.onload = function() {
    
    var e = document.getElementsByTagName('span');
    
    for (var i = 0, l = e.length; i < l; i++) {
        if (typeof e[i].className !== 'undefined' && e[i].className === 'convertNumberToName') {
            e[i].innerHTML = convertToName(e[i].innerHTML);
        }
    }
    
    function convertToName(n) {
        var names = ['John', 'Pete', 'Bob'],
            n = parseInt(n);
        
        if (names[n]) {
            return names[n];
        }
        
        return 'Unknown';
    }
    
};	
</script>

<span class="convertNumberToName">1</span><br />
<span class="convertNumberToName">2</span><br />
<span class="convertNumberToName">3</span>


</body>
</html>

I get the following result:



Pete
Bob
Unknown

1 becomes Pete instead of John
2 becomes Bob instead of Pete
and 3 becomes Unknown instead of Bob

6

Its because the array starts at 0 not 1 which is why the demo works, the only way around it is to manually define the keys using an object rather then a normal array which is redundant anyway.

7

Replacing:

var names = [‘John’, ‘Pete’, ‘Bob’]

with:

var names = [‘notUsed’, ‘John’, ‘Pete’, ‘Bob’]

seems to help. It’s not a pretty solution, but it works :wink:

Result:

John
Pete
Bob

8

A better solution is to leave the array as:


var names = ['John', 'Pete', 'Bob']

and to increase the index value, to retrieve the appropriate value.


n = parseInt(n, 10) - 1;
9 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Convert Number to Name</title>
</head>

<body>


<!-- Convert Number to Name -->
<script type="text/javascript">
window.onload = function() {
    
    var e = document.getElementsByTagName('span');
    
    for (var i = 0, l = e.length; i < l; i++) {
        if (typeof e[i].className !== 'undefined' && e[i].className === 'convertNumberToName') {
            e[i].innerHTML = convertToName(e[i].innerHTML);
        }
    }
    
    function convertToName(n) {
        var names = ['John', 'Pete', 'Bob'],
            n = parseInt(n, 10) + 1;
        
        if (names[n]) {
            return names[n];
        }
        
        return 'Unknown';
    }
    
};	
</script>

<span class="convertNumberToName">1</span><br />
<span class="convertNumberToName">2</span><br />
<span class="convertNumberToName">3</span>


</body>
</html>

I get the following result from that:

Bob
Unknown
Unknown

10

Remove 1 from the display value.

The numbers come in as 1, 2, 3 - and you need to remove 1 from them to being them to 0, 1, 2


n = parseInt(n, 10) - 1;
11

That did the trick! Thank you Paul :slight_smile: