Fatal编程技术网
  • javascript/
  • Javascript 如何使用jQuery更新textarea内的代码

Javascript 如何使用jQuery更新textarea内的代码

javascript jquery html css xml

Javascript 如何使用jQuery更新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 = '';

  // 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 ) {

        template_code += $(template_code).find('setting#'+ new_field.name).text(new_field.value);
        console.log(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字段）{
template_code+=$（template_code）.find（'setting#'+new_field.name.）.text（new_field.value）；
console.log（新字段值）；
});
$（“#模板代码”）.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/
在…上
这是一个有效的JSFIDLE，可以让您更轻松：

这是一个小视频，解释了我想要什么：

您可以尝试使用以下代码将旧数据更新为新数据：

$(document).on('click', '#update-code', function (){
    new_data = $( "#settings-form" ).serializeArray();

    $.each( new_data, function( i, new_field ) {
        var xml = $($.parseXML(template_code));
        xml.find('setting#'+ new_field.name).text(new_field.value);
        template_code = (new XMLSerializer()).serializeToString(xml[0]);  
    });

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

    return false;
});
演示：

您可以尝试使用以下代码用新数据更新旧数据：

$(document).on('click', '#update-code', function (){
    new_data = $( "#settings-form" ).serializeArray();

    $.each( new_data, function( i, new_field ) {
        var xml = $($.parseXML(template_code));
        xml.find('setting#'+ new_field.name).text(new_field.value);
        template_code = (new XMLSerializer()).serializeToString(xml[0]);  
    });

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

    return false;
});
演示：

好的，这是基于的想法，嗯。。。简单的搜索/替换为动态正则表达式构建（这一部分可以/应该改进，也许有更好的正则表达式，你可以有更好的解决方案。我不擅长正则表达式，但HTML不应该用正则表达式解析：）。代码的第一部分是原来的。。。我改变了第二个函数

$(document).on('click', '#update-code', function (){

    //template_code=$('#template-code').val();

for(i=0;i<$('input:text').length;i++)  {

dynamic_regex="(<setting id='"+$('input:text').eq(i).attr('id')+"'>)(.*?)(</setting>)";

var regex = new RegExp(dynamic_regex, 'gm');

var subst = '$1'+ $('input:text').eq(i).val() +'$3'; 
$('#template-code').val($('#template-code').val().replace(regex, subst));

    }

});

$（文档）。在（'单击'，'更新代码'）上，函数（）{
//模板_代码=$（'#模板代码'）.val（）；

对于（i=0；i好的，这是一个基于，嗯…简单搜索/替换为动态正则表达式构建（这部分可以/应该改进，也许使用更好的正则表达式你可以有更好的解决方案。我不擅长正则表达式，但HTML不应该用正则表达式解析：）。代码的第一部分是原样的…我更改了第二个函数


$(document).on('click', '#update-code', function (){

    //template_code=$('#template-code').val();

for(i=0;i<$('input:text').length;i++)  {

dynamic_regex="(<setting id='"+$('input:text').eq(i).attr('id')+"'>)(.*?)(</setting>)";

var regex = new RegExp(dynamic_regex, 'gm');

var subst = '$1'+ $('input:text').eq(i).val() +'$3'; 
$('#template-code').val($('#template-code').val().replace(regex, subst));

    }

});



$（文档）。在（'单击'，'更新代码'）上，函数（）{
//模板_代码=$（'#模板代码'）.val（）；

对于（i=0；你能更清楚地说明问题所在吗？或者你对代码的哪一部分有问题？@SoorajChandran在用户输入的代码中有两个设置标签，我想用用户在输入中输入的新值更改这些标签的值。例如，在我输入的代码中，设置t中有两个值ag是：“，”和“on”，当我把整个代码放在输入中并提交时，我会在输入中得到这两个值。我想当用户更改输入中的值时，它会在主题代码中更改，因此如果他将“”更改为“google.com”我想在整个代码中替换它。我希望你能理解，因为我的英语不好。@SoorajChandran请看演示中的代码与问题中的代码不同。请更新问题和代码，使其清晰明了relevant@charlietfl你是什么意思？请看这个：你能更清楚一点问题是什么吗？或者t的哪一部分你的代码有问题吗？@SoorajChandran在用户输入的代码中有两个设置标记，我想用用户在输入中输入的新值更改这些标记的值。例如，在我输入的代码中，设置标记中有两个值，分别为：“开”和“开”当我将整个代码放入并提交时，我会在输入中获得这两个值。我希望当用户更改输入中的值时，它会在主题代码中更改，因此如果他将“”更改为“google.com”我想在整个代码中替换它。我希望你能理解，因为我的英语不好。@SoorajChandran请看演示中的代码与问题中的代码不同。请更新问题和代码，使其清晰明了relevant@charlietfl你是什么意思？请看：你的代码确实改变了文本，但不幸的是它删除了XML代码：@masked魔术师，您必须将textarea内容视为文本，在更新（并执行搜索/替换）时，dom操作将不会给出结果，似乎-jquery会感到困惑@不管怎样，你能告诉我你的想法的原理以及如何运用它吗？因为我是个初学者，很快就会被弄糊涂。Thanks@maskedmagician，我已经更新了我的代码，以防止删除XML元素，但在更新代码后，元素的属性将与您的示例重新排列，可以吗？您的代码确实更改了文本，但不幸的是它删除了XML代码：@masked魔术师，您必须将textarea内容视为文本，在更新（并执行搜索/替换）时，dom操作将不会给出结果，似乎-jquery会感到困惑。：）@不管怎样，你能告诉我你的想法的原理以及如何运用它吗？因为我是个初学者，很快就会被弄糊涂。Thanks@maskedmagician，我已经更新了我的代码，以防止删除XML元素，但在更新代码后，元素的属性将与您的示例重新排列，可以吗？