Refresh your textarea content using the replace method in jQuery

Question

Refresh your textarea content using the replace method in jQuery

My goal is to extract and manipulate specific values within a user-entered code using jQuery. The code includes custom tags called setting, which I want to extract and display in input fields for easy editing. I have successfully retrieved and displayed the values in the inputs, but I am struggling to update the code with the modified values.

Here is the structure of the HTML code:

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

The CSS code used to hide elements:

.unactive {
    display: none
}

And here is the jQuery code snippet:

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

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

  // Logic to extract settings and display in #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);
        
        template_code.replace(text, new_field.value);
    });

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

    return false;

  });

});

An example of the theme code that will be inserted into the textarea:

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

If you want to test the functionality, visit this JsFiddle link, copy the code, paste it into the textarea, click "Submit Code", and you will see the input fields populated based on the values inside the setting tags. Feel free to update the inputs and click "Update Code" to attempt changing the setting tag values.

javascript jquery html css xml

Answer 1

Answer №1

Give this a try and see if it meets your needs:

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 wrapContent(data) {
  var output = '';
  var i, numItems;

  output += "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\r\n";
  output += "<!DOCTYPE html>\r\n";
  output += "<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";
  output += "  <head>\r\n";
  output += "    <b:include data='blog' name='all-head-content'/>\r\n";
  output += "    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'/>\r\n";
  output += "    <link href='http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'/>\r\n";
  output += "    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>\r\n";
  output += "    <title><data:blog.pageTitle/></title>\r\n";
  output += "  </head>\r\n";
  output += "  <body>\r\n";
  output += "    <div id='option-panel' style='display:none!important'>\r\n";

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

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

  return output;
}

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

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

  $(virtualNode).find('setting').each(function(i) {
    var $this = $(this),
            settingValue = $this.text(),
            settingId = $this.attr('id');

    tempOutput += '<input id="' + settingId + '" name="' + settingId + '" type="text" value="' + settingValue + '"><br>';
  });

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

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

  event.preventDefault();

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

  $("#template").val(wrapContent(tempData));
});

Does this solution align with your requirements? It seems like using jQuery may have made the process more complex than necessary. I utilized a virtual node to efficiently extract only the setting tags from the textarea on submission.

I excluded styles for quicker testing, and it's important to implement proper validation for user input.

Edit: I updated the answer to include a basic wrapping function to illustrate the concept. I recommend creating a proper template instead of using this function directly, which would involve additional work beyond the scope of this question.

Latest JSFiddle after modifications: http://jsfiddle.net/zo3hh2ye/6/

Answer 2

Give this a try and see if it meets your needs:

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 wrapContent(data) {
  var output = '';
  var i, numItems;

  output += "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\r\n";
  output += "<!DOCTYPE html>\r\n";
  output += "<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";
  output += "  <head>\r\n";
  output += "    <b:include data='blog' name='all-head-content'/>\r\n";
  output += "    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'/>\r\n";
  output += "    <link href='http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'/>\r\n";
  output += "    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>\r\n";
  output += "    <title><data:blog.pageTitle/></title>\r\n";
  output += "  </head>\r\n";
  output += "  <body>\r\n";
  output += "    <div id='option-panel' style='display:none!important'>\r\n";

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

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

  return output;
}

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

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

  $(virtualNode).find('setting').each(function(i) {
    var $this = $(this),
            settingValue = $this.text(),
            settingId = $this.attr('id');

    tempOutput += '<input id="' + settingId + '" name="' + settingId + '" type="text" value="' + settingValue + '"><br>';
  });

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

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

  event.preventDefault();

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

  $("#template").val(wrapContent(tempData));
});

Does this solution align with your requirements? It seems like using jQuery may have made the process more complex than necessary. I utilized a virtual node to efficiently extract only the setting tags from the textarea on submission.

I excluded styles for quicker testing, and it's important to implement proper validation for user input.

Edit: I updated the answer to include a basic wrapping function to illustrate the concept. I recommend creating a proper template instead of using this function directly, which would involve additional work beyond the scope of this question.

Latest JSFiddle after modifications: http://jsfiddle.net/zo3hh2ye/6/

Answer 3

Answer №2

Check out this alternative version of the code. I stored the new values in an array and then used them to replace the existing values in the textarea text. Give it a try to see if it resolves your issue.

Here's the script:

 <script type="text/javascript">
    $('#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              
        $('#submit-code').click(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
        $('#update-code').click(function () {

            new_data = $("#settings-form").serializeArray();

            $(template_code).find('setting').each(function (i) {
                template_code = template_code.replace("<setting", "").replace("id='" + $(this).attr("id") + "'>", "").replace($(this).html(), "{" + i + "}").replace("</setting>", "");
            });

            $.each(new_data, function (i, new_field) {
                template_code = template_code.replace("{" + i + "}", "<setting id='" + new_field.name + "'>" + new_field.value + "</setting>");
            });

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

            return false;

        });

    });
</script>

And here's the HTML Template:

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

While I was able to replace most of the text in the template you provided, I couldn't replace the text 'on', which could be due to it being a reserved keyword. However, everything else seems to be working fine.

Answer 4

Check out this alternative version of the code. I stored the new values in an array and then used them to replace the existing values in the textarea text. Give it a try to see if it resolves your issue.

Here's the script:

 <script type="text/javascript">
    $('#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              
        $('#submit-code').click(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
        $('#update-code').click(function () {

            new_data = $("#settings-form").serializeArray();

            $(template_code).find('setting').each(function (i) {
                template_code = template_code.replace("<setting", "").replace("id='" + $(this).attr("id") + "'>", "").replace($(this).html(), "{" + i + "}").replace("</setting>", "");
            });

            $.each(new_data, function (i, new_field) {
                template_code = template_code.replace("{" + i + "}", "<setting id='" + new_field.name + "'>" + new_field.value + "</setting>");
            });

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

            return false;

        });

    });
</script>

And here's the HTML Template:

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

While I was able to replace most of the text in the template you provided, I couldn't replace the text 'on', which could be due to it being a reserved keyword. However, everything else seems to be working fine.

Refresh your textarea content using the replace method in jQuery

Answer №1

Answer №2

Similar questions

What is the best way to bind a model to a directive in Angular.js?

What is the best way to compare the position-x of two components that are aligned on the same line?

Differences between Bootstrap-5 CSS files and SCSS files

Displaying an image in AngularJS using a byte array received in the response

Maximizing the potential of a single .js file for multiple .html pages with AngularJS

What is the best way to add clickable links to 3D objects and meshes with ThREE?

Exploring elementary functionalities within PHP

New Relic identifies mysterious delays caused by MongoDB's findOne method

Alignment of Submenus in a CSS Vertical Menu

JavaScript validation is failing, yet the form is still getting submitted

Using Rails to reference an image in CSS

Seeking a solution for inserting input values into a JSON file within a node.js environment

Discovering the total of varying inputs in ReactJS

When rendering, HTML characters are not translated

Insert a THREE.Points element into the scene: Error in THREE.Object3D.add: The object being added is not a valid instance of THREE.Object3D (

The Angular ui-calendar introduces an innovative approach to event addition, providing users with

Receiving an inaccurate value from the input with type='number' attribute

Tips for splitting a container of specific height into sections measuring 80% and 20%

What method can I use to adjust the font style when it overlays an image?

Is there a way to customize the slicing of *ngFor in a component according to the components it is being injected into?