Question

我有一个用户输入表单，用户可以使用表单添加托管在其他地方的图像。图像显示为一个小图标，它既是一个链接，也会在悬停时将图像加载到堆叠顺序为+1的div中。图像源地址仅存储在链接标记中。

我使用<div />和contenteditable=true作为用户输入。使用表单时附加图标。这部分的代码工作正常。我想做的是检查所有图像标签的来源，以确保用户没有添加自己的html来显示他们帖子中的完整尺寸图像。

我在后端使用php删除除链接和图像之外的所有标签，但是想在发布之前使用jQuery检查图像标签的src。

<a href="image_source.jpg"><img src="my_icon" /></a> //this is what my form will input

<img src="anything_else"> //this is what I want to prevent

更新：如果不清楚，我道歉。基本上，我不希望用户能够输入他们自己的任何HTML。如果他们想要添加图像，他们必须使用我的内置形式，插入上面的内容。

Answer 1

特别是对于您的网站，代码提醒所有图片的链接：

$('.postimage').each(function(){
   alert($(this).attr('href'));
});

Answer 2

您可以遍历图像，然后检查src属性。

$("img").each(function(index) {
    if ($(this).attr("src") == ...) {
        // do something
    }
}

有关详细信息，请参阅http://api.jquery.com/each/和http://api.jquery.com/attr/。

Answer 3

假设我们有<div id="editor" /> jQuery脚本看起来像这样：

var srcs = [];
jQuery ('div#editor img').each (function () {
  srcs.push (jQuery (this).attr ('src'));
});

srcs现在将保留src标记中提供的<img /> - 标记的所有<div id="editor" /> - 属性。

Answer 4

我有一个答案。当用户在contenteditable =“true”div中输入<或>时，浏览器会使用html表示法<和>替换它们。好消息是输出用户评论时图像永远不会显示。坏消息是上面给出的基于jQuery的解决方案无法消除丑陋的编码。我最终使用php来完成

$post = $_POST['comment'];
$imgcheck = true;
$stringstart = 0;

while($imgcheck == 'true'){
    if($stringstart = strpos($post,'&lt;img',$stringstart)){
        if ($stringend = strpos($post,'&gt;',$stringstart)){
            $strlength = $stringend - $stringstart +4;
            $substring = substr($post,$stringstart,$strlength);
            if (!preg_match('~src="\/images\/ImageLink.jpg"~',$substring)){
                $post = str_replace($substring, "", $post);
            }
            else{
                $stringstart = $stringend;
            }

        }
        else{
            $imgcheck = 'false';
        }
    }
    else{
            $imgcheck = 'false';
    }

}

如何使用jQuery检查用户输入中所有图像标记的来源

4 个答案: