如何搜索HTML的每一部分

How to search through every part of HTML

本文关键字：HTML 一部分 搜索 何搜索      更新时间：2023-09-26

我试图忽略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>标签中搜索"新闻"，然后创建一个指向网站的链接。但是，我不想在现有链接之上创建链接。我当前的代码会忽略<p>标记中的所有内容，因为那里已经有一个链接了。

这里有一种方法可以忽略锚点，这样就不会在现有锚点中创建新的锚点
这只针对文本节点

$(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

为了保持dollarsign，您必须执行$$，因为dollarign在正则表达式中具有特殊意义。

我采用了不同的方法，扩展了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'});

示例

$('p').replace();

稍微更改正则表达式以考虑"news"开头的空格（而不是大于括号），可以对扩展函数进行一次简洁的调用。还进行了更新，使函数更加有用，允许用户向函数传递参数。仍然不完美——一项正在进行的工作。

您可以通过查看每个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

相关文章：