Question

我试图忽略HTML部分中的任何链接，并获取任何没有链接来执行我的功能。

到目前为止我所拥有的是：

$(document).ready(function() {
     // search through paragraphs
     $("p").each(function() {
          // if there is not a link
          if (!$(this).find('a').hasClass('external-link')) {
                 // do my function
          }
     })
})

我遇到的问题是，如果一行中有链接，而且我想在同一行中捕获它不起作用，因为它忽略了整行。

以下是工作JSFiddle的链接，希望能让您了解我的目标。

提前谢谢

编辑：

我可能会稍微混淆这个问题。

我想要实现的一个例子是：

<p>Link to ignore: <a href="http://www.bbc.co.uk" class="external-link" rel="nofollow">news</a>
Link to create: news </p>

我的代码会在<p>标签中搜索＆＃34; news＆＃34;，然后创建指向该网站的链接。但是，我不想在现有链接之上创建链接。我当前的代码会忽略<p>标记内的所有内容，因为已存在链接。

Answer 1

这是忽略锚点的一种方法，因此您不会在现有锚点内创建新锚点这仅针对textNodes

$(document).ready(function () {
    $("p").contents().each(function(_, node) {
        if ( node.nodeType && node.nodeType === 3 ) {
            var regex = /(news)/g;
            var value = node.nodeValue.replace(regex, '<a href="https://www.bbc.co.uk/$1">$$&</a>');
            if (value.match(regex)) {
                var wrap  = document.createElement('span');
                wrap.innerHTML = value
                node.parentNode.insertBefore(wrap, node);
                node.parentNode.removeChild(node);
            }
        }
    });
});

FIDDLE

要保持美元符号，您必须执行$$，因为美元符号在正则表达式中具有特殊含义。

Answer 2

我采用了不同的方法并扩展了jQuery的函数原型 -

$.fn.extend({
    replace: function (options) {
        var defaults = {
                search: ''
            };
        options = $.extend(defaults, options);

        return this.each(function () {
            var string = $(this).html();
            //var regex = /(search)/g;
            var regex = /(^|\s)news/;
            //var regex = new RegExp("(^|\s)" + options.search);
            console.log(regex);
            var replace_text = string.replace(regex, '<a href = "https://www.bbc.co.uk/$1">$&</a>');
            $(this).html(replace_text);
        });
    }
});


$('p').replace({search: 'news'});

EXAMPLE

$('p').replace();

在'news'的开头稍微更改正则表达式以占用空格（而不是大于括号）允许对扩展函数进行单一的整齐调用。还更新以使该函数更有用，允许用户将参数传递给函数。仍然不完美 - 正在进行的工作。

Answer 3

您可以通过查看每个p的子节点并抓住没有external-link类的子节点来执行此操作：

var otherText = [];
$("p").each(function(){
    console.log(this.childNodes);
    var kids = this.childNodes;
    for(var i = 0; i < kids.length; i++)
    {
        if(!($(kids[i]).hasClass("external-link")))
        {
            otherText.push(kids[i]); //or do what you want with the node here
        }
    }
});
console.log("other Text", otherText);

jsFiddle

如何搜索HTML的每个部分

3 个答案: