创建带有img标签的文本节点的子串时禁止下载图片

Question

我正在对Wordpress REST API端点进行异步调用。我正在创建一个带有文章摘录和缩略图列表的新闻区。客户并没有把摘录放在他们所有的帖子上，所以我打算简单地使用帖子内容，并用子字符串限制内容。

我想要的是没有超文本标记语言的post.content.rendered的前75个字符，也没有下载文本结尾的图像(S)。

接口响应示例：

{  
   "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中找到的图像。我也不会在页面的任何地方输出完整的内容。

如何阻止它获取这些图像？

Answer 1

为了详细说明我的评论，我认为令人不快的代码行是$(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 ' 

上面的正则表达式摘自here，它还包含其他建议。您还可以编写一个正则表达式来专门剥离图像标记。

一个重要的注意事项是，如果$()真的执行了HTML，那么它也是一个安全风险，因为内容中的任何<script>标记都可能被执行。