javascript - 把数字变成星星？

Question

我有这个代码女巫可以很好地将数字 1 变成星星，但是如果我想要像 1-5 这样的几个数字变成与数字相同数量的星星 (*)，我可以在相同的循环还是我需要创建 5 个不同的循环，每个循环一个？

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;
    }

}

此代码获取用户输入的值并将其放入数组中...

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();

        }

    });

然后函数 updateFilmlist 看起来像这样......

    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();

    }

当我添加您在 changeNumber 函数中向我展示的代码时，唯一变成星号的数字是动态创建的列表中的第一个列表元素...然后其余的只是显示为数字，这是为什么？顺便说一句，你可以忽略 betyg_array，因为它是另一个函数，与问题无关......

Answer 1

为你准备的一条线:

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

[解释]

/(\d+)/g 从字符串(例如“1”、“15”)中提取连续数字集 (\d)。

回调函数返回一个连接数组，n个元素=找到的数字集转换为Number(+-operator，这里是+a)+a +1+1(加 1)，因为连接包含 n 个空元素“字符串”的数组会返回长度为 n-1 的字符串。

[bonus] 你可以像这样扩展 String

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"> ... 

还有一点更复杂:

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">