用星号javascript/jquery替换数字？答案

【问题标题】：replace a number with star sign javascript/jquery?用星号javascript/jquery替换数字？
【发布时间】：2013-02-23 08:53:35
【问题描述】：

如何用 javascript/jquery 替换 span 元素中的文本或数字？这是我尝试过的，但控制台显示“无法调用未定义的方法'替换'”不明白是什么问题，有人能指出正确的方向吗？

    function changeNumber()
{
    var element = document.getElementsByClassName("grade").innerHTML; 
    var x = element.replace('1','*');
    document.getElementsByClassName("grade").innerHTML=x;
}

如果我在 javascript 中动态创建的 span 元素很重要...

【问题讨论】：

标签： javascript replace innerhtml

【解决方案1】：

document.getElementsByClassName("grade")返回一个NodeList，它不像getElementbyId，你需要循环它。

如果你只有一个

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

如果你有一套

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

【讨论】：

不明白你对集合的意思，我试图用更多的数字 2、** 等向它添加更多变量，直到 5 但它仍然只是为第一创造了一颗星。 .. 我需要在循环中添加什么以使其将吃到的数量更改为吃到的星星数量？
或者我真的需要创建5个函数来将5个不同的数字变成星星吗？

【解决方案2】：

如果您的页面中已经包含 jQuery，并且对它的使用感到满意，请尝试以下代码：

function changeNumber()
{
    $(".grade").each(function(){
        var self = this
        self.text(self.text().replace('1','*'))
    }); 
}

工作演示：http://jsfiddle.net/pratik136/uUHv8/

【讨论】：

很好，谢谢！两者都不太舒服，但 jquery 看起来很有前途:)
如何在循环中添加更多数字，比如我想将数字从 1-5 转换为 1-5 颗星？
在每个人都回答了你的第一个问题后改变问题。接受一个答案并提出一个新问题。
好的，我会的，但是当它是同一个问题时似乎没有必要，只是有更多的数字并且可能是一个小的配置，但是我也不擅长编码，所以我会照常做告诉...

【解决方案3】：

虽然发布的答案是正确的，尽管您已经接受了答案，但我对创建 replace() 函数以与 nodeList 一起使用的可能性很感兴趣（或者，严格来说，一个Object)，所以：

Object.prototype.replace = function (n, r) {
    var textMethod = this[0] && this[0].textContent !== undefined;
    for (var i = 0, len = this.length; i < len; i++) {
        if (textMethod) {
            this[i].textContent = this[i].textContent.replace(n, r);
        } else {
            this[i].innerText = this[i].innerText.replace(n, r);
        }
    }
    return this;
};

document.getElementsByTagName('p').replace(/1/, '*');

JS Fiddle demo.

我可以确认这适用于 Win XP 下的 Chrome 25、Firefox 19（也是 14 和 18，有一段时间没有更新这台计算机）。我无法在 IE 中测试，因为它和 JS Fiddle，seem to be having issues。

这也可能不是一个好主意；但在我把它放在一起的时候，它似乎很有用（而且相对有趣）。希望它可能有一些用处。

【讨论】：