试图用实际数据替换占位符文本，但它不起作用

Posted 2023-05-09

【中文标题】试图用实际数据替换占位符文本，但它不起作用

【英文标题】：Trying to replace placeholder text with actual data, but it is not working

【发布时间】：2020-06-13 14:48:40

【问题描述】：

我正在用 JS 构建一个简单的预算应用程序。现在，我可以成功输入费用或收入并在 UI 中显示。但是，描述并没有出现，而是占位符文本。 。有人知道为什么吗？

下面是 UI 控制器。我创建了一个带有占位符文本的 html 字符串。接下来，我试图用一些实际数据替换占位符文本，在这种情况下是费用的描述。然后我尝试将 HTML 插入到 dom 中。

var UIController = (function()
    var DOMstrings = 
        inputType: '.add__type',
        inputDescription: '.add__description',
        inputValue: '.add__value',
        inputBtn: '.add__btn',
        incomeContainer: '.income__list', 
        expensesContainer: '.expenses__list'
    ;
    return 
        getInput: function()
            return 
             type: document.querySelector(DOMstrings.inputType).value, //Will be either inc (income) or exp (expense)
             description: document.querySelector(DOMstrings.inputDescription).value,
             value: document.querySelector(DOMstrings.inputValue).value
            ;
        ,
        addListItem: function(obj, type)
            var html, newHtml, element;
            //create HTML string with some placeholder text
           if (type === 'inc')
            element = DOMstrings.incomeContainer;
            html = `<div class="item clearfix" id="income-%id%"> <div class="item__description">%description%</div>
            <div class="right clearfix"> <div class="item__value">%value%</div> <div class="item__delete"> 
            <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button> </div></div></div>`;
            else if (type === 'exp') 
            element = DOMstrings.expensesContainer;
            html = `<div class="item clearfix" id="expense-%id%"> <div class="item__description">%description%</div>
                <div class="right clearfix"><div class="item__value">%value%</div><div class="item__percentage">21%</div>
                <div class="item__delete"><button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                </div></div></div>`;
            
            //replace the placeholder text with actual data
            newHtml = html.replace('%id%', obj.id);
            newHtml = html.replace('%description%', obj.description);
            newHtml = html.replace('%value%', obj.value); 

             //Insert the HTML into the DOM
            document.querySelector(element).insertAdjacentHTML('beforeend', newHtml);
        ,
        getDOMstrings: function()
            return DOMstrings;
        
    

)();

【参考方案1】：

看起来问题是您在html 上进行每个文本替换并将其保存到newHtml，覆盖先前的替换。只有您的%value% 替换才会生效。您需要使用 newHtml 来构建替换内容：

        newHtml = html.replace('%id%', obj.id);
        newHtml = newHtml.replace('%description%', obj.description);
        newHtml = newHtml.replace('%value%', obj.value); 

【讨论】：

我确实用您的建议替换了它。但是，现在我变得不确定。有什么原因可以解释为什么现在会发生这种情况？