how to use hashtag regex with ajax?

Question

I already did a hashtag in the base.html it is working. like if anyone type something with #something it will replace by the javascript in the html with links. It is working on the post list. so i want to work it on the comments. But the comments have ajax method that's why it is not working in the comments. can we keep them both(AJAX and Hashtag).

my base.html:

$(document).ready(function() {
      $("p").each(function(data) {
        var strText = $(this).html();
        console.log('1. strText=', strText);
        var arrElems = strText.match(/@[a-zA-Z0-9]+/g);
        console.log('arrElems=', arrElems);
        $.each(arrElems, function(index, value){
            strText = strText.toString().replace(value, '<a href="/user/'+value.replace('@', '')+'">'+value+'</a>');
        });
        console.log('2. strText=', strText);
        $(this).html(strText);
      });
    });
   (#the ajax method for comments)
$(document).on('submit', '.comment-form', function(event){
       event.preventDefault();
       console.log($(this).serialize());
        $("p").each(function(data) {
        var strText = $(this).html();
        console.log('1. strText=', strText);
        var arrElems = strText.match(/@[a-zA-Z0-9]+/g);
        console.log('arrElems=', arrElems);
        $.each(arrElems, function(index, value){
            strText = strText.toString().replace(value, '<a href="/user/'+value.replace('@', '')+'">'+value+'</a>');
        });
        console.log('2. strText=', strText);
        $(this).html(strText);
      });
    });
       $.ajax({
          type: 'POST',
          url: $(this).attr('action'),
          cache: false,
          data: $(this).serialize(),
          dataType: 'Json',
          success: function(response) {
            $('.main-comment-section').html(response['form']);
            $('textarea').val('');
            $('.reply-btn').click(function() {
               $(this).parent().parent().next('.replied-comments').fadeToggle()
               $('textarea').val('');
            });
          },
          error: function(rs, e) {
            console.log(rs.responseText)
          },

       });
    });

my comments.html:

<form method="post" enctype="multipart/form-data" class="comment-form" action=".">
{% csrf_token %}
{{ comment_form.as_p }}
<input type="submit" value="submit" class="btn-btn-outline-success">
</form>
<div class="container">
    {{ comments.count }} comment{{ comments|pluralize }}
    {% for comment in comments %}
    <blockquote class="blockquote">
      <p class="mb-0">{{ comment.content }}</p>
        <div class="options">
          {% if comment.user == user %}
          <a href="{% url 'comment-delete' pk=comment.pk %}">delete</a>
          {% endif %}
        </div>
      <footer class="blockquote-footer">by <cite title="Source Title">{{ comment.user }}</cite>
        <button type="button" name="button" class="reply-btn btn btn-outline-dark btn-sm">reply</button> 

      </footer>
</blockquote>
<div class="replied-comments container mt-2" style="display:none;">
    {% for reply in comment.replies.all %}
    <blockquote class="blockquote">
      <p class="mb-0"><small>{{ reply.content }}</small></p>
      <footer class="blockquote-footer"><small>by <cite title="Source Title">{{ reply.user }}</cite></small></footer>
    </blockquote>
    {% endfor %}
    <div class="form-group-row">
        <form method="post" class="reply-form" action="." enctype='multipart/form-data'>
             {% csrf_token %}
             <input type="hidden" name="comment_id" value="{{ comment.id }}">
             {{ comment_form.as_p }}
             <input type="submit" value="submit" class="btn-btn-outline-success">
         </form>
    </div>
</div>
{% endfor %}

the ajax method raise errors like the ajax is not working the hashtag is not working.

Answer 1

well i just have to put the script into the comments.html not in the base.html.