我如何修改我的mentionify扩展以忽略已经'mentionify'-ed元素

How can I modify my mentionify extension to ignore already 'mentionify'-ed elements?

本文关键字：mentionify 元素 #39-ed 扩展 何修改 修改 我的      更新时间：2023-09-26

我已经编写了一个jQuery扩展：

$.fn.mentionify = function() {
    return this.each(function() {
        var link = $(this);
        link.html(link.html().replace(/(^|[^@'w])@('w{1,30})'b/g, '$1<span class="mention">@$2</span>'));
    });
}

哪个转向：

@username

但不是：

name@website.com

进入：

<span class="mention">@username</span>

但是，如果我在一个元素上运行它两次，它就会将已经存在的span封装在另一个span标记中。如何检查预先存在的span？

让它测试Regex，看看是否已经存在跨度。 

function() {
    var link = $(this);
    if(/<span/.test(link.html()))
       return;
    link.html(link.html().replace(/(^|[^@'w])@('w{1,30})'b/g, '$1<span class="mention">@$2</span>'));
}

编辑：

好吧，我终于明白你在问什么，你想做什么了。然而，我在尝试中没有找到答案。但我不想让你两手空空，所以我告诉你我经历了什么。希望这将在某种程度上有所帮助。

尝试1

首先，您需要更改正则表达式，这是正确的。但这不是用一个表达式就能实现的。最初，我的想法是检查结束标签。这将从<span>@test</span>@test2匹配@test。

但这并不能解释两个跨度之间的@：<span></span>@test<span></span>。请在此处查看最后一行https://regex101.com/r/zB3yI9/5.

为了应对这种情况，您需要在之前检查打开标签。但它是一个嵌套的跨度。。。。这也是同样的问题。

尝试2

我现在知道Regex模式本身还不够复杂。相反，您需要递归遍历DOM，直到找到一个简单可行的字符串。

我在jQuery中写了一个小提琴来做这件事。http://jsfiddle.net/zf63hca2/

但我遇到了一个问题。jQuery只看到DOM对象，而不看到它们周围的零散文本。

尝试3

所以DOM不能帮你，它必须用Regex来完成。艰难的道路。我现在知道他们为什么警告我不要使用RegexHTML了。我会写代码，但我的大脑快要融化了。因此，以下是步骤的详细信息。

  1. 递归查找所有简单表达式，将它们从字符串中删除。一个简单的表达式是一个打开和关闭跨度之间没有一个打开
  2. 不断重复1，直到不再匹配为止。这将说明嵌套
  3. 最后应该只剩下一堆没有span标记的字符串
  4. 匹配Twitter帐户并替换
  5. 倒过来把整件事拼凑起来

有一个Regex API可以简化这个过程。XRegExp支持链接。优点是你还可以从每场比赛中获得开始和结束索引。

TL；DR

如果你真的想让它与DOM一起工作，那么无论如何，去做吧。但到目前为止，只要提供的字符串不包含DOM，它就已经可以构建多个Twitter链接了。

相关文章：