Question

我有来自JSON的这个字符串渲染“我是$ 1 $ frontend开发人员从$ 3 $ $ $ $ $”开始工作。“

现在，我想用动态html输入文本框替换$1$,$2$和 $3$ 。所以输出应该是我

<-input textbox here> frontend developer works at <-input textbox here> from <-input textbox here>.

var str = "I am $1$ frontend developer works at $2$ from $3$";
var newStr = "";
for(var i=0;i<3;i++){
var id = '$'+i+'$';
if (str.indexOf(id) >= 0){
   newStr = str.replace(id, $.parseHTML('<div><input type="text" 
id="input-"+i/></div>'));
}

我尝试使用字符串替换方法。但似乎它只适用于字符串。我可以使用其他任何方法来实现这一点，使用javascript / jquery

Answer 1

    <div id="div1">
    </div>

    <script type="text/javascript">
var data = "I am $1$ frontend developer works at $2$ from $3$";
     //include jQuery before this code
      $(function(){
        data.replace('$1$','<input type="text" />').replace('$2$','<input type="text" />').replace('$3$','<input type="text" />');
       });

   $('#div1').html(data);
    </script>

Answer 2

var input = "I am $1$ frontend developer works at $2$ from $3$";
var result = input.replace(/\$\d\$/g, '<div><input type="text" id="input-"+i/></div>');

结果现在是：

I am <div><input type="text" id="input-"+i/></div> frontend developer works at <div><input type="text" id="input-"+i/></div> from <div><input type="text" id="input-"+i/></div>

我使用的正则表达式来自@ n0m4d

发布的评论

Answer 3

你也可以尝试这样的事情：

var input = "I am $1$ frontend developer works at $2$ from $3$";
var result = replaceWithInputTags(input, '$')

function replaceWithInputTags(source, templateChar){
   var sourceArgs = source.split(templateChar);

   return sourceArgs.map(function(item){
       var index = +item;
       if (isNaN(index)) return item;
       return "<input type='text' id='input-" + (index-1) + "' />";       
   }).join('');
}

使用javascript将String替换为html内容

3 个答案: