0

我是 javascript 新手，但了解 jQuery。我正在尝试使用此代码来转换 www. 和 http in p 标签到工作链接。

这是我正在使用的代码，问题是我不完全理解代码是如何工作的，有人可以解释一下吗？

<script>
var re = /(http:\/\/[^ ]+)/g;

function createLinks(els) {
    $(els).contents().each(function () {
        if (this.nodeType === 1 && this.nodeName !== 'script') {
            createLinks(this);
        } else if (this.nodeType === 3 && this.data.match(re)) {
            var markup = this.data.replace(re, '<a href="$1">$1</a>');
            $(this).replaceWith(markup);
        }
    });
}

createLinks(document.body);
</script>
4

2 回答 2

1

首先，为匹配从“http://”开始的文本设置正则表达式模板

其次，您创建遍历整个 html 文档的递归函数。

nodeType == 1 表示当前元素是html标签（即a、p、div等）

nodeType == 2 表示元素是属性

nodeType == 3 表示该元素是文本节点

因此，当您找到 html 标记时，您正在其中进行搜索，当您找到文本节点时，您正在通过正则表达式检查，如果此文本从“http://”开始，如果是，则更改并将此文本替换为<a href="yourmatchedurl">yourmatchedurl</a>

最后你调用你的函数从body作为根开始

于 2013-11-07T10:33:30.880 回答
0

好的，这就去...

//create a regular expression to format the link 
var re = /(http:\/\/[^ ]+)/g;

//this is the create links function which gets called below, "els" is the elements passed to the function (document.body)
function createLinks(els) {

    //for each of the elements in the body
    $(els).contents().each(function () {

        //check if its an element type but not a script
        if (this.nodeType === 1 && this.nodeName !== 'script') {

            //call the create links function and send in this object
            createLinks(this);

        //if its not an element but is a text node and the format matches the regular expression
        } else if (this.nodeType === 3 && this.data.match(re)) {

            //create the markup
            var markup = this.data.replace(re, '<a href="$1">$1</a>');

            //finally, replace this link with the marked up link
            $(this).replaceWith(markup);
        }
    });
}
//call the create links function
createLinks(document.body);

我希望注释代码可以帮助您理解。

于 2013-11-07T10:35:59.190 回答