url source to Image javascript

时间:2017-03-07 22:01:31

标签: javascript jquery regex

所以我读了this question并且我想使用它的答案,但是当我覆盖我放入的所有东西时,如果我例如添加一个红色的div它就会消失。我怎样才能使这个javascript与我的其他HTML一起工作......

var newHTML = replaceWithImgLinks($(document.body).text());
$(document.body).html(newHTML);
function replaceWithImgLinks(txt) {
var linkRegex = /([-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?(?:jpg|jpeg|gif|png))/gi;
var replacement = '<a href="$1" target="_blank"><img class="sml" src="$1" /></a><br />'
return txt.replace(linkRegex, replacement);
}

(我很愚蠢,我的javascript知识不是最好的)如果你能解释为什么它不起作用,我会非常满意。:)

这是一个fiddle,所以你可以看到我的问题:

所以我想要做的就是让我的div中的所有imgs srcs改为图像“而不是我认为的整个身体”

1 个答案:

答案 0 :(得分:1)

如果您不需要网址的参数,可以在正则表达式的末尾使用\S*

/([-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?(?:jpg|jpeg|gif|png))\S*/gi

另外,我改变了你所称的课程。在JQuery中替换:

function replaceWithImgLinks(txt) {
    var linkRegex = /([-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?(?:jpg|jpeg|gif|png))\S*/gi;
    return txt.replace(linkRegex, '<a href="$1" target="_blank"><img class="sml" src="$1" /></a><br />');
}

var newHTML = replaceWithImgLinks($('.chatMessages').html());
$('.chatMessages').html(newHTML);
.chatMessages{
  height:200px;
  width:200px;
  background-color:red;
}
.sml{
  height:100px;
  width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class = "chatMessages">
https://i.stack.imgur.com/qgNyF.png?s=328&g=1
</div>