Я не очень опытен в JQuery, но в основном я пытаюсь создать блог-сайт с использованием django. Теперь я хочу добавить изображения к сообщению, и я использую этот метод, который отлично работает в чистом HTML, но, похоже, он не работает с django:
<html
><head></head>
<body>
<p>Some text with http://example.com/image.png and image and <span> nested http://example.com/second.png</span> image and an <img src="https://drop.ndtv.com/albums/AUTO/porsche-taycan-turbo/6401200x900_1_640x480.jpg"> img <span>foo</span> tag</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
jQuery(function () {jQuery('body').find('*').contents().filter(function() {
return this.nodeType == 3;
}).each(function(i, elem)
{
var matches = /(.*)(http:\/\/\S+(?:\.png|\.jpg|\.gif))(.*)/g.exec(elem.wholeText);
if (matches)
{
var parent = elem.parentNode;
var before = matches[1];
var replace = jQuery('<a />').attr('href', matches[2]).append(jQuery('<img />').attr('href', matches[2]))[0];
var after = matches[3];
parent.insertBefore(document.createTextNode(before), elem);
parent.insertBefore(replace, elem);
parent.insertBefore(document.createTextNode(after), elem);
parent.removeChild(elem);
}
});});
</script>
</body>
</html>
И это мой шаблон django, где я хочучтобы использовать это:
{% extends "blog/base.html" %}
{% block title %}{{ object.title }}{% endblock %}
{% block content %}
<article class="media content-section">
<img class="rounded-circle article-img " src="{{object.author.profile.image.url}}"><!--adding pfp beside blog posts-->
<class="media-body">
<div class="article-metadata">
<a class="mr-2" href="{% url 'user-posts' object.author.username %}">{{ object.author }}</a>
<small class="text-muted">{{ object.date_posted|date:"F d, Y" }}</small>
<small class="text-muted">{{ object.category }}</small>
{% if object.author == user %}
<div class="d-flex justify-content-end">
<div class="btn-group" role="group" aria-label="Basic example">
<a class="btn btn-info btn-sm mt-1 mb-1" href="{% url 'post-update' object.id %}">Update</a>
<a class="btn btn-danger btn-sm mt-1 mb-1" href="{% url 'post-delete' object.id %}">Delete</a>
</div>
</div>
{% endif %}
</div>
<h2 class="text-muted">{{ object.title }}</h2>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
{% endblock %}
{% block scripts %}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
jQuery(function () {jQuery('body').find('*').contents().filter(function() {
return this.nodeType == 3;
}).each(function(i, elem)
{
var matches = /(.*)(http:\/\/\S+(?:\.png|\.jpg|\.gif))(.*)/g.exec(elem.wholeText);
if (matches)
{
var parent = elem.parentNode;
var before = matches[1];
var replace = jQuery('<a />').attr('href', matches[2]).append(jQuery('<img />').attr('href', matches[2]))[0];
var after = matches[3];
parent.insertBefore(document.createTextNode(before), elem);
parent.insertBefore(replace, elem);
parent.insertBefore(document.createTextNode(after), elem);
parent.removeChild(elem);
}
});});
</script>
{% endblock %}
Но, похоже, это не работает в Django вообще. Есть идеи?