Question

我有一个像这样的字符串。

x = '<div class="sample">
         <img src="http://www.example.com/i/java.png"> 
     </div>
     <div class="sample_another">
         <img src="/i/somedir/python.png"> 
    </div>'

我想转换为此

x = '<div class="sample">
         <img src="http://www.example.com/i/java.png" height="200px" width="100px"> 
     </div>
     <div class="sample_another">
         <img src="/i/somedir/python.png" width="150px" height="150px"> 
    </div>'

输入字符串将是一个html doc。对于doc中的所有图像，我想添加height和width属性。并获得高度和宽度属性我必须使用这样的东西

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.example.com/intl/logo.gif';

P.S。我尝试使用这个solution，但我遇到的问题是字符串可能有脚本标记，DOM将其解析为结束脚本标记。我也找不到正则表达式。那么有没有其他方法可以获得这个结果？感谢。

Answer 1

如果您可以删除脚本而不是使用此代码：

<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
  var string ="<script type"text/javascript"></script><img alt='' 
 src='http://api.com/images/UID' /><br/>Some plain text<br/><a 
  href='http://www.google.com'>http://www.google.com</a>";

var elem= document.createElement("div");

$(string).find('script').remove();

elem.innerHTML = string;

    var images = elem.getElementsByTagName("img");

   for(i=0; i<images.length; i++){
      images[i].width = "150";
     images[i].height = "250";
   }

   string = elem.innerHTML;

您面临的问题是，HTML5不允许使用innerHTML属性动态添加脚本标记。因此，您需要以其他方式动态添加它们。

这是一些可能对您有帮助的代码：

var my_awesome_script = document.createElement('script');
my_awesome_script.setAttribute('src','http://example.com/site.js');
document.head.appendChild(my_awesome_script);

获取img属性并将其添加到字符串

1 个答案: