包装< a> http文字周围的标签 [英] Wrap <a> tags around http text

问题描述

如何找到以http://开头的页面上的每个单词，并在其周围包裹标签?

How do I find every word on a page beginning with http:// and wrap tags around it?

我可以使用正则表达式之类的东西吗?

Can I use something like regex perhaps?

推荐答案

我非常不同意jQuery在此处找到解决方案时可以大量使用.当然，您必须精通一些textNode元素属性，但是使用jQuery库可以使拆分匹配节点后再次将DOM重新放在一起.

I disagree heavily that jQuery can be much use in finding a solution here. Granted you have to get down and dirty with some of the textNode element attributes but putting the DOM back together again after you split your matched node can be made a wee bit easier using the jQuery library.

以下代码以内联方式记录在案，以解释所采取的措施.我已经将它编写为jQuery插件，以防万一您只是想将其带到其他地方使用.这样，您可以确定要为其转换URL的元素的范围，也可以简单地使用$("body")选择器.

The following code is documented inline to explain the action taken. I've written it as a jQuery plugin in case you just want to take this and move it around elsewhere. This way you can scope which elements you want to convert URLs for or you can simply use the $("body") selector.

(function($) {
    $.fn.anchorTextUrls = function() {
        // Test a text node's contents for URLs and split and rebuild it with an achor
        var testAndTag = function(el) {
            // Test for URLs along whitespace and punctuation boundaries (don't look too hard or you will be consumed)
            var m = el.nodeValue.match(/(https?:\/\/.*?)[.!?;,]?(\s+|"|$)/);

            // If we've found a valid URL, m[1] contains the URL
            if (m) {
                // Clone the text node to hold the "tail end" of the split node
                var tail = $(el).clone()[0];

                // Substring the nodeValue attribute of the text nodes based on the match boundaries
                el.nodeValue = el.nodeValue.substring(0, el.nodeValue.indexOf(m[1]));
                tail.nodeValue = tail.nodeValue.substring(tail.nodeValue.indexOf(m[1]) + m[1].length);

                // Rebuild the DOM inserting the new anchor element between the split text nodes
                $(el).after(tail).after($("<a></a>").attr("href", m[1]).html(m[1]));

                // Recurse on the new tail node to check for more URLs
                testAndTag(tail);
            }

            // Behave like a function
            return false;
        }

        // For each element selected by jQuery
        this.each(function() {
            // Select all descendant nodes of the element and pick out only text nodes
            var textNodes = $(this).add("*", this).contents().filter(function() {
                return this.nodeType == 3
            });


            // Take action on each text node
            $.each(textNodes, function(i, el) {
                testAndTag(el);
            });
        });
    }
}(jQuery));

$("body").anchorTextUrls(); //Sample call

请记住，考虑到我编写此方法来填充 textNodes 数组的方法，该方法将找到所有后代文本节点，而不仅仅是直接子节点文本节点.如果您希望它仅在特定选择器内的文本之中替换URL，请删除.add("*"，this)调用，以添加所选元素的所有后代.

Please keep in mind that given the way I wrote this to populate the textNodes array, the method will find ALL descendant text nodes, not just immediate children text nodes. If you want it to replace URLs only amongst the text within a specific selector, remove the .add("*", this) call that adds all the descendants of the selected element.

这是一个小提琴示例.

这篇关于包装< a> http文字周围的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！