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

Im trying to make a formula dynamic and also the input fields. First problem is to change the (c1 + d2) into values like (1 + 2) depending on what is the value in input. consider that tdinput is dynamic so I can add as many as I can and formula can change anytime.

我试着使一个公式动态和输入域。第一个问题是根据输入的值将(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>

2 个解决方案

#1

You need to make a more modular approach with this. And make good use of the javascript jquery api you're using.

您需要用这种方法进行更模块化的处理。充分利用您正在使用的javascript jquery api。

When a variable is defined by data-something-something you can access it by jQuerySelectedElement.data('something-something')

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

Now, eval is evil, but when you sanitise your input variables(in this case by parseInt) you should be relatively save from xss inputs etc..

现在，eval是邪恶的，但是当您对输入变量(在本例中是parseInt)进行清理时，您应该相对地从xss输入中保存下来。

What happens is, all the variables are inserted as an property in an object t. then eval will call and and access all the objects in t and do the calculation.

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

Only requirement is that you define all the variables not as just c2, but as t.c2 in your key definition properties.

唯一的要求是你定义所有的变量不只是c2，而是t。关键定义属性中的c2。

have a look below at the play with the data properties and the eval.

看看下面的数据属性和eval。

When using eval ALWAYS make sure you only eval 'safe' data! Don't eval strings if you plan to safe user input! you open your site for XSS attacks then.

使用eval时，确保只对“安全”数据进行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>

#2

You can use eval().

您可以使用eval()。

Logic

• Fetch formula and save it in string
• 获取公式并保存在字符串中
• Get all valid keys
• 得到所有有效的钥匙
• Replace keys with value in formula
• 用公式中的值替换键
• Use eval() to process it
• 使用eval()来处理它。

Sample

JSFiddle

JSFiddle

$("#btnCalculate").on("click", function() {
   var $f = $("input[data-formula]");
   var formula = $f.data("formula");
   formula.split(/[^a-z0-9]/gi)
      .forEach(function(el) {
         if (el) {
            let v = $("[data-key='" + el + "']").val();
            formula = formula.replace(el, v);
         }
      });

   var result = eval(formula);
   console.log(result)
   $f.val(result)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input class="tdinput" type="text" data-key="c1">
<input class="tdinput" type="text" data-key="d2">
<br/>
<input type="text" data-formula="(c1 + d2)">
<button id="btnCalculate">calculate</button>

Reference

• Eval's alternate for string calculation.
• Eval对字符串计算的替代。
• Why using eval is not a good idea
• 为什么使用eval不是一个好主意