Question

I'm looking for a way to find/replace links to images.

For example, the following text:

<a href="http://domain.com/arbitrary-file.jpg">Text</a>

to

<img src="http://domain.com/arbitrary-file.jpg" />

Answer 1

var linksNodes = document.getElementsByTagName('a');
for( var i = 0; i < linksNodes.length; i++ ) {

    var a = linksNodes[i];
    if( a.href.endsWith(".jpg") || a.href.endsWith(".png") ) {

        var img = document.createElement('img');
        img.src = a.href;
        a.parentElement.replaceChild( img, a );
    }

}

然而，

endsWith在ES6中，但IE11不支持它。您可能需要扩展String：

if( !String.prototype.endsWith ) {

    String.prototype.endsWith = function(value) {

        var expectedIdx = this.length - value.length;
        return this.indexOf( value, expectedIdx  ) == expectedIdx;
    }
}

Answer 2

<a href="http://domain.com/arbitrary-file.jpg" class="test">Text</a>

<script type="text/javascript">
  jQuery(document).ready(function(){
var attrib = jQuery('a.test').attr('href');
jQuery('a.test').removeAttr('href');
jQuery('a.test').attr('src',attrib);

  });

Answer 3

试试这个：

var links = document.getElementsByTagName('a');
var i;
var currentLink;
var newImg;

for (i=0; i<links.length; i++) {

    currentLink = links[i];

    newImg = document.createElement('img');
    newImg.src = currentLink.href;

    currentLink.parentNode.insertBefore(newImg, currentLink);
    currentLink.remove();

}

Answer 4

可以使用Jquery。

步骤A：

首先将<a>标记转换为div代码。将唯一ID添加到div代码：
<div id='divtag'><a href="http://domain.com/arbitrary-file.jpg">Text</a> </div>
var value= $('#divtag a').attr('href')
$('#divtag').text('<img src="+ value +">Text</img>')。

按照上述步骤完成您的工作。

Answer 5

这是在jQuery中最简单的方法：

$("a").each(function() {
  $(this).replaceWith("<img src='" + $(this).attr("href") + "'>")
})

图片代码没有内部文字。因此，您只需将<a href="http://placehold.it/255x255">Something</a>转换为<img src="http://placehold.it/255x255">

即可

编辑：如果你想添加alt文本作为你可以做的内部文本：

$("a").each(function() {
  $(this).replaceWith("<img src='" + $(this).attr("href") + "' alt='" + $(this).text() +"'>")
})

这是您可以运行的代码段：

＆＃13;

$("a").each(function() {
  $(this).replaceWith("<img src='" + $(this).attr("href") + "' alt='" + $(this).text() +"'>")
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://placehold.it/255x230">Text</a>

＆＃13;

替换<a href=""> links to <img src=""/> images

5 个答案: