Запрет загрузки изображений при создании подстроки текстового узла с тегами img - PullRequest
0 голосов
/ 09 января 2019

Я выполняю асинхронный вызов конечной точки API Wordpress REST. Я создаю область новостей со списком выдержек из статей и миниатюрами. Клиент не помещал выдержки во все свои сообщения, поэтому я намеревался просто использовать содержимое сообщения и ограничить содержимое подстрокой.

Мне нужны первые 75 символов файла post.content.rended без HTML и без загрузки изображений в конце текста.

Пример ответа API:

{  
   "id":29,
   "date":"2019-01-09T14:06:55",
   "date_gmt":"2019-01-09T14:06:55",
   "guid":{  
      "rendered":"https://admin.headless-cms.test/?page_id=29"
   },
   "modified":"2019-01-09T14:06:55",
   "modified_gmt":"2019-01-09T14:06:55",
   "slug":"home-page",
   "status":"publish",
   "type":"page",
   "link":"https://admin.headless-cms.test/home-page/",
   "title":{  
      "rendered":"Home Page"
   },
   "content":{  
      // Dont want the image at the end to be downloaded by
      // the browser, just want the first 75 characters.
      "rendered":"<p>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. Excepteur sint occaecat cupidatat non proident, sunt 
                  in culpa qui officia deserunt mollit anim id est laborum.</p>\n
                  <p><img src="some/path/to/file.jpg" /></p>\n",
      "protected":false
   },
   "excerpt":{  
      "rendered":"",
      "protected":false
   },
   "author":1,
   "featured_media":0,
   "parent":0,
   "menu_order":0,
   "comment_status":"closed",
   "ping_status":"closed",
   "template":"",
   "meta":[  

   ],
   "better_featured_image":null,
   "acf":[  

   ],
   "_links":{  
      "self":[  
         {  
            "href":"https://admin.headless-cms.test/wp-json/wp/v2/pages/29"
         }
      ],
      "collection":[  
         {  
            "href":"https://admin.headless-cms.test/wp-json/wp/v2/pages"
         }
      ],
      "about":[  
         {  
            "href":"https://admin.headless-cms.test/wp-json/wp/v2/types/page"
         }
      ],
      "author":[  
         {  
            "embeddable":true,
            "href":"https://admin.headless-cms.test/wp-json/wp/v2/users/1"
         }
      ],
      "replies":[  
         {  
            "embeddable":true,
            "href":"https://admin.headless-cms.test/wp-json/wp/v2/comments?post=29"
         }
      ],
      "version-history":[  
         {  
            "count":1,
            "href":"https://admin.headless-cms.test/wp-json/wp/v2/pages/29/revisions"
         }
      ],
      "predecessor-version":[  
         {  
            "id":30,
            "href":"https://admin.headless-cms.test/wp-json/wp/v2/pages/29/revisions/30"
         }
      ],
      "wp:attachment":[  
         {  
            "href":"https://admin.headless-cms.test/wp-json/wp/v2/media?parent=29"
         }
      ],
      "curies":[  
         {  
            "name":"wp",
            "href":"https://api.w.org/{rel}",
            "templated":true
         }
      ]
   },
   "_embedded":{  
      "author":[  
         {  
            "id":1,
            "name":"overlord",
            "url":"",
            "description":"",
            "link":"https://admin.headless-cms.test/author/overlord/",
            "slug":"overlord",
            "avatar_urls":{  
               "24":"https://secure.gravatar.com/avatar/d1451cce55fa940546c99221f3c3cb48?s=24&d=mm&r=g",
               "48":"https://secure.gravatar.com/avatar/d1451cce55fa940546c99221f3c3cb48?s=48&d=mm&r=g",
               "96":"https://secure.gravatar.com/avatar/d1451cce55fa940546c99221f3c3cb48?s=96&d=mm&r=g"
            },
            "acf":[  

            ],
            "_links":{  
               "self":[  
                  {  
                     "href":"https://admin.headless-cms.test/wp-json/wp/v2/users/1"
                  }
               ],
               "collection":[  
                  {  
                     "href":"https://admin.headless-cms.test/wp-json/wp/v2/users"
                  }
               ]
            }
         }
      ]
   }
}

Код JS

const fetchNews = () => {
    var api = 'https://admin.headless-cms.test/wp-json/wp/v2/pages/29?_embed';

    $.ajax({
        url: api,
        dataType: 'JSON',
        success: function(response) {
            console.log(response);

            if (response.length > 0 ) {
                $.each(response, function(i, post) {
                    var row = $('<div />').addClass('news__row');
                    var link = $('<a />').addClass('hide-for-small-only image-link zoom__container')
                                        .attr('href', post.link)
                                        .attr('title', post.title.rendered);
                    // var img = $('<img />');
                    var img = $('<div/>');

                    var section = $('<section />').addClass('news__details');
                    var small = $('<small />').addClass('news__entry-meta light');
                    var title = $('<p />').addClass('news__title bold');
                    var excerpt = $('<p />').addClass('news__excerpt');
                    var readMore = $('<a />').addClass('news__read-more').attr('href', post.link).attr('title', post.title.rendered).text('... Read More >');

                    // Featured image
                    $('.news__left a').attr('href', post.link);
                    // $(img).attr('src', post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url);
                    $(img).addClass('featured-image zoom__image');

                    var size;

                    if (i == 0) {
                        size = 'medium';
                    } else {
                        size = 'thumbnail';
                    }

                    $(img).css('background-image', 'url('+post._embedded['wp:featuredmedia'][0].media_details.sizes[size].source_url + ')');
                    $(link).append(img);

                    // Details
                    var date = new Date(post.date).toDateString();
                    $(small).text(date);
                    $(title).text(post.title.rendered);
                    var excerptText = $(post.content.rendered).text().substring(0,75);  // Code in question
                    $(excerpt).text(excerptText);
                    $(excerpt).append(readMore);

                    $(section).append(small)
                              .append(title)
                              .append(excerpt);

                    $(row).append(link)
                          .append(section);

                    $('.lds-container').fadeOut();

                    setTimeout(function() {
                        if (i == 0 ) {
                            var firstStory = $(row).clone();
                            $('.news__left').append(firstStory).fadeIn();
                        }
                        $('.news__content').append(row).fadeIn();
                    }, 100);
                });
            }
        },
        error: function(xhr, status, error) {
            console.log(error);
        },
    });
}

export { fetchNews };

В тексте выдержки нет тегов <img />, но на вкладке сети загружаются изображения, найденные только в полном post.content.rendered. Я не выводю полный контент нигде на странице.

Как мне остановить получение этих изображений?

1 Ответ

0 голосов
/ 09 января 2019

Чтобы уточнить мой комментарий, я считаю, что неправильная строка кода - $(post.content.rendered). Поскольку содержимое может интерпретироваться как HTML, jQuery создаст несмонтированный элемент DOM со всем содержимым. Другими словами, лучшим решением, вероятно, является удаление HTML-тегов другим способом.

Одним из простых решений может быть использование регулярного выражения для простого удаления всего, что находится внутри угловых скобок.

let string = '<p>My HTML content with an <img src="some://image.url"></p>'
string.replace(/(<([^>]+)>)/ig,"");

// output 'My HTML content with an ' 

Вышеупомянутое регулярное выражение взято из здесь , которое также содержит другие предложения. Вы также можете написать регулярное выражение, специально предназначенное для удаления тегов изображений.

Важным примечанием является то, что, если $() действительно выполняет HTML, это также является угрозой безопасности, поскольку могут выполняться любые теги <script> в содержимом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...