Javascript用dom对象中的值替换字符串

我试图使一个公式和输入字段动态。第一个问题是根据输入中的值将（c1+d2）更改为类似（1+2）的值。考虑TD输入是动态的，所以我可以尽可能多地添加，并且公式可以随时改变。

<input class="tdinput" type="text" data-key="c1">
<input class="tdinput" type="text" data-key="d2">

<input type="text" data-formula="(c1 + d2)">

<script>
    $('.tdinput').on('change', function() { 
        var key = $(this).attr('data-key');
        $('[data-formula*="+key+"]').each(function() { 
            //now here goes to change the data-formula by inputted values
            //calculate using eval()
        });
    });

</script>

$（'.tdinput'）。在（'change'，function（）{
var key=$（this.attr（'data-key'）；
$（'[data formula*=“+key+”]'）。每个（函数（）{
//现在，通过输入值来更改数据公式
//使用eval（）计算
});
});

您需要采用一种更加模块化的方法。 并充分利用您正在使用的javascript jquery api

当一个变量由data something定义时，您可以通过

jQuerySelectedElement.data（'something-something'）

现在，eval是邪恶的，但是当您清理输入变量（在本例中是通过parseInt）时，您应该相对节省xss输入等

发生的情况是，所有变量都作为属性插入到对象

t

中。 然后eval将调用并访问t中的所有对象并进行计算

唯一的要求是，您不仅要将所有变量定义为c2，还要在密钥定义属性中定义为t.c2

下面看一看数据属性和评估的游戏

使用eval时，请始终确保仅评估“安全”数据如果您计划保护用户输入，请不要评估字符串！然后打开站点进行XSS攻击

$（'[data formula]'）。在（'keyup'，function（）{
var$this=$（this）；
var formulaName=$this.data（'formula'）；
变量$output=$（'[data formula name=“'+formulaName+'“]”）；
var公式=$output.data（'formula-calc'）；
var t={}；
var键=[]；
$select=$（“[data formula=“”+formulaName+”]”）；
$select.each（功能（索引、元素）{
变量$elem=$（elem）；
var key=$elem.data（'key'）；
t[key]=parseFloat（$elem.val（））；
按键。按（键）；
if（isNaN（t[key]））{
t[key]=0；
}
});
对于（var c=0；c您可以使用
eval（）

逻辑

获取公式并将其保存为字符串
获取所有有效密钥
用公式中的值替换键
使用
eval（）
进行处理

样品


$（“#btnCalculate”）。在（“单击”，函数（）{
var$f=$（“输入[数据公式]”）；
var公式=$f.data（“公式”）；
公式分割（/[^a-z0-9]/gi）
.forEach（功能（el）{
如果（el）{
设v=$（“[data key='”+el+']”）.val（）；
公式=公式。替换（el，v）；
}
});
var结果=评估（公式）；
console.log（结果）
$f.val（结果）
})



calculate
感谢您让我理解了eval的概念。我只是注意到，当您输入非数值时，它会减少eval的处理。您不想输入非数值。这会让您面临xss攻击，输入非数值的能力，可能会与其他人共享，会将您的站点打开到xss攻击。我刚刚添加了一个isnan过滤器，它只允许数字输入，使键流动；-）不再需要添加t。在它之前手动：-）