javascript - change numbers into stars? - Stack Overflow

admin管理员组

文章数量:1296487

I have this code witch works fine to change the number one into a star, but if I want several numbers like 1-5 to change into the same amount of stars(*) as the number is could I do this within the same loop or do I need to create 5 diferent loops, one for each number?

function changeNumber()
{
    var elements= document.getElementsByClassName("grade");
    for (var i=0; i<elements.length; i++) {
        var element = elements[i];
        var text = element.innerHTML; 
        var x = text.replace('1','*');
        element.innerHTML=x;
    }

}

this code gets the values the user typed in and places it in a array...

var button = $('#add');
    button.click(function() 
    {
        //funktion för vad som ska hända när man klickar på knappen
        var filmnamn = $('#name');
        var filmnamnet = filmnamn.val();
        var betyg = $('#star');
        var betyget = betyg.val();
        betyget = Number(betyget);

        if(filmnamnet == 0)
        {
            $('#name').css('background-color', 'red');

        }
        if(betyget == 0)
        {
            $('#star').css('background-color', 'red');

        }
        if(betyget == 0 || filmnamnet == 0)
        {
            alert("Vänligen fyll i fälten korrekt");

        }
        else
        {
            var array = new Array();
            array.unshift(betyget);
            array.unshift(filmnamnet);
            film_array.unshift(array);
            betyg_array.unshift(array);
            updateFilmList();

        }

    });

Then the function updateFilmlist looks like this...

    var film_list = $("#filmlista");
    var film_array = new Array();        

function updateFilmList()
    {
            document.getElementById("name").value = '';
            document.getElementById("star").value = 0;
            var filmen = film_array[0][0];
            var grade = film_array[0][1];
            var element = '<li class="lista">' + filmen + '<span class="betyg">'+ grade +'</span></li>';
            film_list.append(element);
            changeNumber();

    }

And when I added the code you showed me in the changeNumber function the only number thats get changed into a star is the first list element in the dynamically created list... then the rest just shows up as numbers, why is that? btw you can ignore betyg_array since its for another function and has nothing to do with the problem...

I have this code witch works fine to change the number one into a star, but if I want several numbers like 1-5 to change into the same amount of stars(*) as the number is could I do this within the same loop or do I need to create 5 diferent loops, one for each number?

function changeNumber()
{
    var elements= document.getElementsByClassName("grade");
    for (var i=0; i<elements.length; i++) {
        var element = elements[i];
        var text = element.innerHTML; 
        var x = text.replace('1','*');
        element.innerHTML=x;
    }

}

this code gets the values the user typed in and places it in a array...

var button = $('#add');
    button.click(function() 
    {
        //funktion för vad som ska hända när man klickar på knappen
        var filmnamn = $('#name');
        var filmnamnet = filmnamn.val();
        var betyg = $('#star');
        var betyget = betyg.val();
        betyget = Number(betyget);

        if(filmnamnet == 0)
        {
            $('#name').css('background-color', 'red');

        }
        if(betyget == 0)
        {
            $('#star').css('background-color', 'red');

        }
        if(betyget == 0 || filmnamnet == 0)
        {
            alert("Vänligen fyll i fälten korrekt");

        }
        else
        {
            var array = new Array();
            array.unshift(betyget);
            array.unshift(filmnamnet);
            film_array.unshift(array);
            betyg_array.unshift(array);
            updateFilmList();

        }

    });

Then the function updateFilmlist looks like this...

    var film_list = $("#filmlista");
    var film_array = new Array();        

function updateFilmList()
    {
            document.getElementById("name").value = '';
            document.getElementById("star").value = 0;
            var filmen = film_array[0][0];
            var grade = film_array[0][1];
            var element = '<li class="lista">' + filmen + '<span class="betyg">'+ grade +'</span></li>';
            film_list.append(element);
            changeNumber();

    }

And when I added the code you showed me in the changeNumber function the only number thats get changed into a star is the first list element in the dynamically created list... then the rest just shows up as numbers, why is that? btw you can ignore betyg_array since its for another function and has nothing to do with the problem...

• javascript

Share Improve this question Follow edited Mar 13, 2013 at 17:57 spovell asked Mar 10, 2013 at 13:31 spovellspovell 13333 silver badges1313 bronze badges 2

• so you mean if text is 2 replace with ** and 3 replace with *** etc? – Popnoodles Commented Mar 10, 2013 at 13:36
• yes thats what i mean – spovell Commented Mar 10, 2013 at 14:42

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

A oneliner for you:

var str = '8 rabbits, that\'s 16 rabbit ears';
str = str.replace(/(\d+)/g,function(a){return Array(+a+1).join('*')});
//=> ******** rabbits, that's **************** rabbit ears

[explanation]

/(\d+)/g extracts sets of consecutive digits (\d) from the string (e.g. '1', '15').

The callback function returns a joined array with n elements = the found set of digits converted to Number (+-operator, here +a) +a+1+1 (add 1) because join of an Array with n empty elements 'string' returns a string with length n-1.

[bonus] You could extend String like this

String.prototype.replaceNumbersWithStr = function(str){
   str = str || '*'; // default to '*';
   return this.replace(/(\d+)/g,function(a){return Array(+a+1).join(str)});
}
// usage examples
'8 rabbits, that\'s 16 rabbit ears'.replaceNumbersWithStr();
 //=> ******** rabbits, that's **************** rabbit ears

'8 rabbits, that\'s 16 rabbit ears'
   .replaceNumbersWithStr('<span class="star"></span>');
 //=> <span class="star"></span><span class="star"> ... 

And a bit more sophisticated:

String.prototype.Num2Str = function(str){
   str = str || '*'; // default to '*';
   return this.replace(/\{(\d+)\}/g,function(a,b){return Array(+b+1).join(str)});
}
// usage example
'{2} rabbits, that\'s 4 rabbit ears'.Num2Str();
 //=> ** rabbits, that's 4 rabbit ears

'Stars: {2}'.Num2Str('<span class="star"></span>');
 //=> Stars: <span class="star"></span><span class="star"> 

Working demo

You don't need a condition for each or a loop.

function changeNumber(){
    var elements= document.getElementsByClassName("grade");
    for (var i=0; i<elements.length; i++) {
        var element = elements[i];
        var length = parseInt(element.innerHTML);
        var x=Array(length+1).join("*");
        element.innerHTML=x;
    }
}

Array(5).join("*") will give you a string of 4 stars. I'm sure you can figure it out from there.

if you have a mobile number and you want to show last four digit and hide the rest digits, so you have to do simple work here:

let number = '0123456789'; // suppose we have a number we want to show last four and hide rest digits, so what to do:

let numbers = '6789';

const maskedNumber = numbers.padStart(10, 'X');

Your result will be XXXXXX6789.

let number = '0123456789'; // suppose we have a number we want to show last four and hide rest digits, so what to do:

let numbers = '6789';

const maskedNumber = numbers.padStart(10, 'X');

console.log(maskedNumber);

本文标签： javascriptchange numbers into starsStack Overflow