Question

我有一个问题，并尝试在一周内找到。我需要帮助:(

我的脚本有：

<script type="text/javascript">
var list_images = 'image1.jpg|image2.jpg|image3.jpg|image4.jpg|image5.jpg|image6.jpg|image7.jpg';
var images = list_images.split('|');
</script>

但在博客中知道我的脚本总是提供更多标签

<script type="text/javascript">
var list_images = '

<div></div>
<a herf="anything"><img src="image1.jpg"><a/>
<a herf="anything"><img src="image2.jpg"><a/>
<a herf="anything"><img src="image3.jpg"><a/>
<a herf="anything"><img src="image4.jpg"><a/>
<a herf="anything"><img src="image5.jpg"><a/>
<li><img src="image6.jpg"></li>
<li><img src="image7.jpg"></li>
<br/>

';
var images = list_images.split('|');
</script>

我想删除所有标签并将其转换为

var list_images = 'image1.jpg|image2.jpg|image3.jpg|image4.jpg|image5.jpg|image6.jpg|image7.jpg';

Answer 1

遗憾的是，Blogger编辑器不能很好地处理代码块。

默认情况下，它会在每行的末尾添加<br/>标记，从而导致格式正确的脚本失败。

到目前为止，我见过的唯一解决方法并不漂亮。

<script type="text/javascript">/*
  */var list_images = /*
  */'image1.jpg|image2.jpg|image3.jpg|image4.jpg|image5.jpg|image6.jpg|image7.jpg';/*
  */var images = list_images.split('|');/*
*/</script>

基本上一直到下一行开头的所有内容都被强制作为注释，这样当Blogger注入<br/>标签时，浏览器会忽略它们。

Blogger注入BR后的结果：

<script type="text/javascript">/*<br/>
  */var list_images = /*<br/>
  */'image1.jpg|image2.jpg|image3.jpg|image4.jpg|image5.jpg|image6.jpg|image7.jpg';/*<br/>
  */var images = list_images.split('|');/*<br/>
*/</script><br/>

Answer 2

只是以不同方式分割文字：

var list_images = '...blah blah...';

var firstPass = list_images.split('src="');

var entry;
//skip first result
for(var i=1;i<firstPass.length;i++){
  entry = firstPass[i];
  firstPass[i] = entry.substr(0,entry.indexOf('"'));
}

//firstPass (you can change the name) now contains the list of src's

Answer 3

假设这个HTML在DOM中，你可以这样做：

<script type="text/javascript">
$(document).ready(function() {
    var src_array = [];

    $('img').each(function() {
        src_array.push(this.src);
    });

    var joined_src = src_array.join('|');
});
</script>

<div></div>
<a href="anything"><img src="image1.jpg"></a>
<a href="anything"><img src="image2.jpg"></a>
<a href="anything"><img src="image3.jpg"></a>
<a href="anything"><img src="image4.jpg"></a>
<a href="anything"><img src="image5.jpg"></a>
<li><img src="image6.jpg"></li>
<li><img src="image7.jpg"></li>
<br/>

如果它不是DOM的一部分，您可以将.each()代码替换为：

$(some_html_string).find('img').each(function() {
    ...
});

http://jsfiddle.net/hans/SfNCF/

Answer 4

使用Javascript操作文档中的元素我强烈建议使用某种类型的框架，例如Jquery，它可以轻松地让您轻松查找和操作图像，代码看起来像：

$(document).ready(function(){

  //find stuff
  $('img').each(function(){ 

      //do stuff with it
      $(this).attr('[name of the attribute]','[value you want to put in it]');

  });

});

如果您不熟悉Javascript或未使用过Jquery，这是一个很好的起点：http://docs.jquery.com/Tutorials

Answer 5

//this is your list (this variable will hold your html)
var list_images;

//this varaible will hold array of images
var newList=[]

$(list_images).find('img').each(function(){
      newList.push($(this).attr('src'));
});

//your list is ready acess your variable 'newList'
//this variable hold an array in format
//['image1.jpg','image2.jpg','image3.jpg'];

//the string
var stringList=newList.join('|');

//this will hold a string in format 
// "image1.jpg|image2.jpg}image3.jpg"

查找并显示图像src属性

5 个答案: