Rails 4 Replace words occurrences with form in post body

Question

I need replace each word between '--' and '--', every word can be extracted with something like:

labels = @post.body.scan(/--(.+?)--/).flatten

But, I do not know how to generate the form with which to replace the words (i think to use each word as a label). Something like this (but something that does work):

    <% if labels.length > 0 %>

    <strong> <%= 'Replace labels' %> </strong>

    <%= form_tag do %> 

      <% num = 0 %> 

      <%  labels.length.times do %>

      <p>
        <%= label_tag labels[num] %><br>
        <%= text_field_tag labels[num] %>
        <% num = num + 1 %>
      </p>

      <%end%>

      <p>
        <%= submit_tag ("Replace") %>
      </p>

    <% end %>
<% end %>

@post.body = "--Lorem ipsum-- dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et --dolore-- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. --Duis aute-- irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."

labels [--Lorem ipsum--, --dolore--, --Duis aute--]

In this case the form contains three labels and text fields to enter the text to replace the labels.

Answer 1

Edited.

I think a simpler solution might be just using javascript to link a text field with inputs for each label:

$(function(){
    var $label_holder = $('#post_labels'),
        $post_body = $('#post_body'),
        tag = /--(.+?)--/g,
        delimiter = /--/g;

    // When the label inputs change
    // Update the body
    $label_holder.on('change keyup', 'input', function(){
        var new_label = '--' + $(this).val() + '--';
        var text = $post_body.val();
        var old_label = text.match(tag)[$(this).index()];
        $post_body.val(text.replace(old_label, new_label));
    });

    // When the body changes
    // Update the label inputs
    $post_body.on('change, keyup', function(){
        var labels = $post_body.val().match(tag);
        labels = $.map(labels, function(str){ return str.replace(delimiter, '') });
        $label_holder.empty();
        // This creates an input for each label
        $(labels).each(function(i, val){
            var input = document.createElement('input');
            input.name = 'labels[' + i + ']';
            input.value = val;
            $label_holder.append(input);
        });
    }).trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="edit_post" id="edit_post_5" action="/posts/5" accept-charset="UTF-8" method="post">

  <div class="field">
    <label for="post_body">Body</label><br>
    <textarea name="post[body]" id="post_body" style="margin: 0px; height: 168px; width: 150px;">--Lorem asd-- dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
--asd-- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
--Duis aute-- irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
    </textarea>
  </div>

  <fieldset>
    <legend>Labels</legend>
    <div class="field" id="post_labels"><input name="labels[0]"><input name="labels[1]"><input name="labels[2]"></div>
  </fieldset>

  <div class="actions">
    <input type="submit" name="commit" value="Update Post">
  </div>
</form>

Press the run snippet button and try it out.

The rails form would look like this:

<%= form_for(@post) do |f| %>
  <div class="field">
    <%= f.label :body %><br>
    <%= f.text_area :body %>
  </div>

  <fieldset>
    <legend>Labels</legend>
    <div class="field" id="post_labels">
    </div>
  </fieldset>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

Since we edit do all the label editing in javascript and send an updated post[body] we don't have to care about the labels in rails.

class PostsController < ApplicationController
  before_action :set_post, only: [:show, :edit, :update, :destroy]

  # GET /posts
  def index
    @posts = Post.all
  end

  # GET /posts/1
  def show
  end

  # GET /posts/new
  def new
    @post = Post.new
  end

  # GET /posts/1/edit
  def edit
  end

  # POST /posts
  def create
    @post = Post.new(post_params)

    if @post.save
      redirect_to @post, notice: 'Post was successfully created.'
    else
      render :new
    end
  end

  # PATCH/PUT /posts/1
  def update
    if @post.update(post_params)
      redirect_to @post, notice: 'Post was successfully updated.'
    else
      render :edit
    end
  end

  # DELETE /posts/1
  def destroy
    @post.destroy
    redirect_to posts_url, notice: 'Post was successfully destroyed.'
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_post
      @post = Post.find(params[:id])
    end

    # Only allow a trusted parameter "white list" through.
    def post_params
      params.require(:post).permit(:body)
    end
end