jquery 使用专用的 URL 部分在 link 上自动添加标签

Question

我想在我的 CMS 中的图像上使用灯箱克隆（彩盒）功能。 CMS 使用 TinyMCE 4 作为所见即所得的编辑器。

要使用灯箱功能，我必须在显示的缩略图周围的完整图像 link 中添加 "rel='xyz'" 标签。

不幸的是，在 TinyMCE 编辑器中，最终用户无法添加 "rel" 标签……除了在源代码编辑器中。另一种方法是使用一个小的 jquery 代码在准备好的文档上分配这样一个 "rel" 标签，例如 ...

<script>
$(document).ready(function(){
    $(".myClass").colorbox({rel:'image_group'});
...

这在理论上可以完成这项工作，不幸的是，用户无法在 gui 中的 link 上输入 class（要在源代码视图中添加它是一个 NoGo为了他们！）。

最终用户可以在 link gui 中输入的是 link URL、标题和目标以及要显示的 text/thumbnail。

在网站上，我有 2 个不同来源的图像，一个模板文件夹和一个媒体文件夹。幸运的是，我想对媒体文件夹的所有图像使用灯箱效果。但当然不是模板中的那些。

因此，在用户编辑后，我保存了以下内容：

<p>
<a title="image1" href="http://my.url.ch/media/image1_big.jpg"><img src="http://my.url.ch/media/image1_small.jpg" alt="image1" width="300" height="300" /></a>
<br />
<a title="image2" href="http://my.url.ch/media/image2_big.jpg"><img src="http://my.url.ch/media/image2_small.jpg" alt="image2" width="300" height="300" /></a>
</p>

当页面显示给访问者时我需要的是：

<p>
<a rel="colorbox" title="image1" href="http://my.url.ch/media/image1_big.jpg"><img src="http://my.url.ch/media/image1_small.jpg" alt="image1" width="300" height="300" /></a>
<br />
<a rel="colorbox" title="image2" href="http://my.url.ch/media/image2_big.jpg"><img src="http://my.url.ch/media/image2_small.jpg" alt="image2" width="300" height="300" /></a>
</p>

（非常准确：添加此 rel 属性的位置无关紧要;-)）

现在的问题是：是否可以在准备好的文档上添加 "rel" 标签（如上面的代码），但仅在来自专用 URL 部分的所有 <a> 标签上添加（例如媒体文件夹）？如果是的话 ;-) 有人还可以提供提示如何...

非常感谢

Answer 1

这样的东西行得通吗？

$(document).ready(function(){
  $.each($('img'), function(index, element){
    var img = $(element);
    //match the img tags, which src attribute starts with //i. only.
    if(img.attr('src').match(/\/\/i\..+/)){
      img.attr('rel', 'something');
    }
  });
})

您只需更改正则表达式以匹配图像的 url。

https://jsfiddle.net/j0vmcqa2/

[更新]

您还需要记住，我正在检查 img 标签，在您的情况下，我认为您需要将其添加到标签中。这个想法是相似的，您可以将 'img' 更改为 'a' 而不是在 src 属性中搜索，而是在 href 属性中进行搜索。

Answer 2

您可以在将数据提交到服务器之前执行此操作

$('#form').submit(function(eventObj) {
    var content = $('#contentBox').val();
    alert(content);
    content = content.replace('<img', '<img rel="lightframe"');
    alert(content);
    $('#contentBox').val(content)
    return true;
});

请核实并告诉我 http://codepen.io/Rohithzr/pen/bprKER 我相信最好的方法是在用户发布时添加它.. 在用户提交时使用此脚本，以便它直接添加到数据库

Answer 3

我正在添加另一个答案，因为 OP 无法访问 CMS 的代码，否则我之前的答案将被取消。但我将答案留给其他人，因为它在正常情况下有效。话虽如此，这里是新的答案。

这段代码将找到所有带有 <a> 元素的标签，如果 href 包含 "/media/" 文本，则添加 rel="colorbox"。

$(document).ready(function(){
  $.each($('a'), function(index, element){
    if(element.toString().indexOf("/media/") > 0){
      $(this).attr('rel', 'colorbox');
    }
  });
});

http://codepen.io/Rohithzr/pen/JXryRp

检查上面的笔以获取工作示例。它使用下面的代码作为 html 其中两个元素有 /media/ 而一个元素有 /notmedia/

<p>
<a title="image1" href="http://my.url.ch/media/image1_big.jpg"><img src="http://my.url.ch/media/image1_small.jpg" alt="image1" width="300" height="300" /></a>
<br />
<a title="image2" href="http://my.url.ch/media/image2_big.jpg"><img src="http://my.url.ch/media/image2_small.jpg" alt="image2" width="300" height="300" /></a>
<a title="image2" href="http://my.url.ch/notmedia/image2_big.jpg"><img src="http://my.url.ch/notmedia/image2_small.jpg" alt="image2" width="300" height="300" /></a>
</p>

jquery 使用专用的 URL 部分在 link 上自动添加标签

jquery auto add a tag on link with dedicated URL part

jquery

url

lightbox

colorbox