用 Javascript 或 PHP 替换部分 HTML 字符串

Question

我需要替换部分 HTML 标记以显示 YouTube 视频：

<div class="pretty-embed" data-pe-videoid="IL5AbXBqzwk" data-pe-fitvids="true">&nbsp;</div>

直接链接到 YouTube 图片，同时保留 data-pe-videoid 属性中定义的 ID：

<img src="http://img.youtube.com/vi/YiF7e7m2jPo/sddefault.jpg">

如果我把它分成两部分，我需要替换

<div class="pretty-embed" data-pe-videoid="

与

<img src="img.youtube.com/vi

和

" data-pe-fitvids="true">&nbsp;</div>

与

/sddefault.jpg">

我正在寻找使用 PHP 或 jQuery/vanilla JavaScript 的解决方案。我尝试使用 PHP 和正则表达式进行试验，但没有成功。

任何帮助将不胜感激。

Answer 1

使用 jQuery 向每个 div 添加/附加图像的解决方案，因为它不清楚您所说的“替换部分 html”是什么意思：

(function($) {
  $(function() {
    $('[data-pe-videoid]').each(function() {
      var el = $(this);

      // append img

      el.append($('<img src="http://img.youtube.com/vi/' + el.data('pe-videoid') + '/sddefault.jpg">'));
    });
  });
})(jQuery);

替代地替换而不是附加：

el.replaceWith($('<img src="http://img.youtube.com/vi/' + el.data('pe-videoid') + '/sddefault.jpg">'));