使用img标签创建文本节点的子字符串时，防止下载图像

Question

我正在异步调用Wordpress REST API端点。我正在创建一个新闻专区，其中列出了文章摘录和缩略图。客户并没有在所有帖子中都摘录，所以我打算只使用帖子内容，并用子字符串限制内容。

我想要的是post.content.render的前75个字符，不带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中找到的图像。我也不会在页面上的任何地方输出全部内容。

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

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>标签都可能被执行。