Question

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

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

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

Answer 1

首先，设置正则表达式模板以匹配从＆＃34; http：//＆＃34;

开始的文本

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

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

nodeType == 2表示该元素是属性

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

所以当你找到html标签时，你会在里面搜索，当您找到文本节点时，您正在通过正则表达式进行检查，如果此文本从＆＃34; http：//＆＃34;开始，如果是这样，您将此文本更改并重新复制到<a href="yourmatchedurl">yourmatchedurl</a>

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

Answer 2

好的，这里有......

//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);

我希望评论的代码可以帮助您理解。

使用jQuery或Javascript将段落中的URL转换为链接

2 个答案: