Как выбрать теги, содержащие почту?

Question

Почтовый адрес указан в разных местах страницы. Например,

<div>
  <p>a@a.ru</p>
</div>
<span>b@b.ru</span>
<a href="#"><b><span>c@c.ru</span></b></a>

Я хочу вешать события на теги, где есть почта, а не на их родительские теги

Однако следующий код принимает все теги вообще, даже тело и события происходят даже при нажатии html

$('*:contains("@")').bind({
            mousedown: function () {
                console.log("Mousedown");
            },
            click: function(){
                console.log('Click');
            },
            copy : function(){
                console.log('Copy');
            },
            cut : function(){
                console.log('Cut');
            }
        });

Answer 1

Используйте filter() для удаления элементов, у которых есть дочерние элементы, поэтому вы будете выполнять привязку только к наиболее глубоко вложенным элементам, которые соответствуют селектору.

$('*:contains("@")').filter(function() {
  return $(this).children().length == 0;
}).on({
  mousedown: function() {
    console.log("Mousedown");
  },
  click: function() {
    console.log('Click');
  },
  copy: function() {
    console.log('Copy');
  },
  cut: function() {
    console.log('Cut');
  }
});

Однако это не сработает для HTML вот так:

<div>
  foo@bar.com
  <span>is the email</span>
</div>

Что вам действительно нужно сделать, так это найти все текстовые узлы, соответствующие шаблону, а затем выбрать их непосредственных родителей. Но вы не можете выбирать текстовые узлы с помощью селекторов, они могут выбирать только теги. Не знаю, как это сделать в jQuery.