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

Question

我正在尝试使公式和输入字段动态化。第一个问题是根据输入的值将 (c1 + d2) 更改为 (1 + 2) 之类的值。考虑到 tdinput 是动态的，所以我可以添加尽可能多的内容，并且公式可以随时更改。

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

Answer 1

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

当变量由 data-something-something 定义时，您可以通过 jQuerySelectedElement.data('something-something') 访问它

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

发生的情况是，所有变量都作为对象t 中的属性插入。 然后 eval 将调用 and 并访问 t 中的所有对象并进行计算。

唯一的要求是您在键定义属性中将所有变量定义为 t.c2 而不是 c2。

请看下面的数据属性和评估。

在使用 eval 时，请始终确保您只评估“安全”数据!如果您打算保护用户输入的安全，请不要评估字符串!然后你打开你的网站进行 XSS 攻击。

$('[data-formula]').on('keyup', function() { 
        var $this = $(this);
        var formulaName = $this.data('formula');
        var $output = $('[data-formula-name="'+formulaName+'"]');
        var formula = $output.data('formula-calc');
        
        var t = {};
        var keys = [];
        $select = $('[data-formula="'+formulaName+'"]');
        $select.each(function(index,elem) {
             var $elem = $(elem);
             var key = $elem.data('key');
             t[key] = parseFloat($elem.val());
             keys.push(key);
             if(isNaN(t[key])) {
                t[key]=0;
             }
        });
        for(var c=0;c<keys.length;c++) {
            formula = formula.replace(new RegExp(keys[c],'g'),'t.'+keys[c]);
        }
        var result = 0;
        eval('result = '+formula)
        $output.val(result)
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
sum:
<input class="tdinput" type="text" data-formula="sum" data-key="c1">
<input class="tdinput" type="text" data-formula="sum" data-key="d2">
<input type="text" data-formula-name="sum" data-formula-calc="(c1 + d2)" disabled>
<BR/>
xor
<input class="tdinput" type="text" data-formula="pow" data-key="c1">
<input class="tdinput" type="text" data-formula="pow" data-key="d2">
<input type="text" data-formula-name="pow" data-formula-calc="(c1 ^ d2)" disabled>
<BR/>
sub
<input class="tdinput" type="text" data-formula="sub" data-key="c1">
<input class="tdinput" type="text" data-formula="sub" data-key="d2">
<input type="text" data-formula-name="sub" data-formula-calc="(c1 - d2)" disabled>
<BR/>
silly
<input class="tdinput" type="text" data-formula="silly" data-key="c1">
<input class="tdinput" type="text" data-formula="silly" data-key="d2">
<input type="text" data-formula-name="silly" data-formula-calc="(c1 / d2 * 3.14567891546)" disabled>