Fatal编程技术网
  • javascript/
  • Javascript 如何通过jQuery用replace方法更新textarea

Javascript 如何通过jQuery用replace方法更新textarea

javascript jquery html css xml

Javascript 如何通过jQuery用replace方法更新textarea,javascript,jquery,html,css,xml,Javascript,Jquery,Html,Css,Xml,我有一个textarea，它将包含用户输入的代码，我想获取该代码并用jQuery扫描它，以获取名为setting的自定义标记内的值，然后将该值添加到输入中，这样用户就可以在不接触代码的情况下更改setting标记内的值。我能够获取这些值并将它们添加到输入中，但我无法用新值更新代码 HTML代码： <div id='tab-1'> <textarea id='template-code' cols='67' rows='27'></textarea> &

我有一个textarea，它将包含用户输入的代码，我想获取该代码并用jQuery扫描它，以获取名为setting的自定义标记内的值，然后将该值添加到输入中，这样用户就可以在不接触代码的情况下更改setting标记内的值。我能够获取这些值并将它们添加到输入中，但我无法用新值更新代码

HTML代码：

<div id='tab-1'>
  <textarea id='template-code' cols='67' rows='27'></textarea>
  <button id='submit-code'>Submit Code</button>
</div>

<div id='tab-2' class='unactive'>
  <form id='settings-form' method='POST'>
    <div id='result'></div>
    <button id='update-code'>Update Code</button>
  </form>
</div>
jQuery代码：

$('#template-code').change(function (){

  var $that = $(this),
      template_code = $that.val(),
      code = '',
      new_data = '',
      text = '',
      newCode = '';

  // Extract settings from the theme and add them to #result              
  $(document).on('click', '#submit-code', function (){

      $('#tab-1').addClass('unactive');
      $('#tab-2').removeClass('unactive');

      $(template_code).find('setting').each(function (i){

        var $this = $(this),
            setting_std = $this.text(),
            setting_id = $this.attr('id');

        code += '<input id="'+setting_id+'" name="'+setting_id+'" type="text" value="'+setting_std+'"><br>';

      });

      if(code !== ''){
        $('#result').html(code);
      }

  });

  // Update old data with the new one
  $(document).on('click', '#update-code', function (){

    new_data = $( "#settings-form" ).serializeArray();
    $.each( new_data, function( i, new_field ) {

        var start_key = "id='"+new_field.name+"'>",
            end_key = '</setting>',
            start  = template_code.indexOf(start_key), 
            end = template_code.indexOf(end_key);

        text = template_code.substring(start + start_key.length, end);

        // THE PROBLEM IS HERE
        // I want the variable template_code to contains the new value not the old one so I used replace but it seems that it doesn't work
        template_code.replace(text, new_field.value);


    });

    $('#template-code').val(template_code);
    $('#tab-1').removeClass('unactive');

    return false;

  });

});

$（'#模板代码'）。更改（函数（）{
var$that=$（this），
template_code=$that.val（），
代码=“”，
新数据=“”，
文本=“”，
新代码=“”；
//从主题中提取设置并将其添加到#结果
$（文档）。在（'单击'，'提交代码'）上，函数（）{
$（'#tab-1'）.addClass（'unactive'）；
$（'#tab-2'）.removeClass（'unactive'）；
$（模板代码）。查找（'setting'）。每个（函数（i）{
变量$this=$（this），
设置_std=$this.text（），
设置_id=$this.attr（'id'）；
代码+='
'；
});
如果（代码！=''）{
$（'#result'）.html（代码）；
}
});
//用新数据更新旧数据
$（文档）。在（'单击'，'更新代码'）上，函数（）{
新的_数据=$（“#设置表单”）.serializeArray（）；
$.each（新的\u数据，函数（i，新的\u字段）{
var start_key=“id=”+new_field.name+“'>”，
结束键=“”，
开始=模板\代码.indexOf（开始\键），
end=模板\代码.indexOf（end \键）；
text=模板\代码.子字符串（开始+开始\键.长度，结束）；
//问题就在这里
//我希望变量template_代码包含新值，而不是旧值，因此我使用了replace，但它似乎不起作用
模板代码.替换（文本，新字段.值）；
});
$（“#模板代码”）.val（模板代码）；
$（'#tab-1'）.removeClass（'unactive'）；
返回false；
});
});
这是将添加到文本区域内的主题代码示例：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>

    <b:include data='blog' name='all-head-content'/>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'/>
    <link href='http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'/>
    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

    <title><data:blog.pageTitle/></title>

    <div id='option-panel' style='display:none!important'>

      <setting id='post_thumbnail'>http://lorempixel.com/640/300/</setting>
      <setting id='search_icon'>on</setting>

    </div>
</head>
<body>

</body>
</html>


http://lorempixel.com/640/300/
在…上
要了解我的问题，请输入并复制上面的代码，然后将其放入文本区域并单击提交代码，您将获得两个输入。这些输入的内容来自这两个标记：

<setting id='post_thumbnail'>http://lorempixel.com/640/300/</setting>
<setting id='search_icon'>on</setting>

http://lorempixel.com/640/300/
在…上
我希望当用户更改输入值时，单击“更新代码”以更改整个代码中设置标记的值。

尝试此操作，看看它是否是您想要的：

HTML

<div id='tab-1'>
  <textarea id='template' cols='67' rows='27'></textarea>
  <button id='submit'>Submit Code</button>
</div>

<div id='tab-2'>
  <form id='settings-form' method='POST'>
    <div id='result'></div>
    <button id='update'>Update Code</button>
  </form>
</div>


提交代码
更新代码
JavaScript:

function wrap(data) {
  var string = '';
  var i, l;

  string += "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\r\n";
  string += "<!DOCTYPE html>\r\n";
  string += "<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>\r\n";
  string += "  <head>\r\n";
  string += "    <b:include data='blog' name='all-head-content'/>\r\n";
  string += "    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'/>\r\n";
  string += "    <link href='http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'/>\r\n";
  string += "    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>\r\n";
  string += "    <title><data:blog.pageTitle/></title>\r\n";
  string += "  </head>\r\n";
  string += "  <body>\r\n";
  string += "    <div id='option-panel' style='display:none!important'>\r\n";

  for (i = 0, l = data.length; i < l; i++)
    string += "      " + data[i].toString() + "\r\n";

  string += "    </div>\r\n";
  string += "  </body>\r\n";
  string += "</html>\r\n";

  return string;
}

$("#submit").on('click', function() {
  var virtual = document.createElement("div");
  var temp = '';

  virtual.innerHTML = $("#template").val();

  $(virtual).find('setting').each(function(i) {
    var $this = $(this),
            setting_std = $this.text(),
            setting_id = $this.attr('id');

    temp += '<input id="' + setting_id + '" name="' + setting_id + '" type="text" value="' + setting_std + '"><br>';
  });

  if (temp !== '')
    $('#result').html(temp);
});

$("#update").on('click', function(event) {
  var temp = [];

  event.preventDefault();

  $("#result").find("input").each(function() {
    temp.push("<setting id=\"" + this.id.toString() + "\">" + this.value.toString() + "</setting>");
  });

  $("#template").val(wrap(temp));
});

函数换行（数据）{
var字符串=“”；
变量i，l；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
对于（i=0，l=data.length；i
我相信这就是你想要的？尽管您使用的是jQuery，但我认为您最终还是让它变得更加困难。在提交时，我使用虚拟节点快速/轻松地从
textarea
中查找并仅提取设置标记（我想是向下和脏的？）

我删除了样式等等，因为它干扰了快速测试，您需要对用户输入应用适当的健全性检查/验证

编辑：更新答案，包括犹太人区包装功能，以阐明概念。我不建议按原样使用它，而是使用一个真正的模板，这将需要在这个问题范围之外的工作

编辑后最新的JSFIDLE:

试试这个，看看它是否是您想要的：

HTML

<div id='tab-1'>
  <textarea id='template' cols='67' rows='27'></textarea>
  <button id='submit'>Submit Code</button>
</div>

<div id='tab-2'>
  <form id='settings-form' method='POST'>
    <div id='result'></div>
    <button id='update'>Update Code</button>
  </form>
</div>


提交代码
更新代码
JavaScript:

function wrap(data) {
  var string = '';
  var i, l;

  string += "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\r\n";
  string += "<!DOCTYPE html>\r\n";
  string += "<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>\r\n";
  string += "  <head>\r\n";
  string += "    <b:include data='blog' name='all-head-content'/>\r\n";
  string += "    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'/>\r\n";
  string += "    <link href='http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'/>\r\n";
  string += "    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>\r\n";
  string += "    <title><data:blog.pageTitle/></title>\r\n";
  string += "  </head>\r\n";
  string += "  <body>\r\n";
  string += "    <div id='option-panel' style='display:none!important'>\r\n";

  for (i = 0, l = data.length; i < l; i++)
    string += "      " + data[i].toString() + "\r\n";

  string += "    </div>\r\n";
  string += "  </body>\r\n";
  string += "</html>\r\n";

  return string;
}

$("#submit").on('click', function() {
  var virtual = document.createElement("div");
  var temp = '';

  virtual.innerHTML = $("#template").val();

  $(virtual).find('setting').each(function(i) {
    var $this = $(this),
            setting_std = $this.text(),
            setting_id = $this.attr('id');

    temp += '<input id="' + setting_id + '" name="' + setting_id + '" type="text" value="' + setting_std + '"><br>';
  });

  if (temp !== '')
    $('#result').html(temp);
});

$("#update").on('click', function(event) {
  var temp = [];

  event.preventDefault();

  $("#result").find("input").each(function() {
    temp.push("<setting id=\"" + this.id.toString() + "\">" + this.value.toString() + "</setting>");
  });

  $("#template").val(wrap(temp));
});

函数换行（数据）{
var字符串=“”；
变量i，l；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
字符串+=“\r\n”；
对于（i=0，l=data.length；i
我相信这就是你想要的？即使您正在使用jQuery，我 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>

    <b:include data='blog' name='all-head-content'/>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'/>
    <link href='http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'/>
    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

    <title><data:blog.pageTitle/></title>

    <div id='option-panel' style='display:none!important'>

      <setting id='post_thumbnail'>text1</setting>
      <setting id='search_icon'>text2</setting>

    </div>
</head>
<body>

</body>
</html>