Question

我正在尝试在文档加载上扫描我的页面并将所有链接转换为超链接。这就是说'x'为空。你能建议我在jquery中如何做到这一点。我不确定.replaceWith是否有效

var x = document.getElementById('body');
x.innerHTML = x.innerHTML.replace(/(http:\/\/[^ ]+)/g,'<a href="$1">$1</a>/');

Answer 1

body不是body元素的'id';它是标记名称，或者在JavaScript中是tagName。因此，您应该使用适当的JavaScript方法getElementsByTagName()。因为这会（可能）返回许多元素，你必须指定你想要使用的返回元素，在这种情况下是第一个（也是唯一的，我想象的），在JavaScript中是第零个，所以你应该使用：

var x = document.getElementsByTagName('body')[0];

参考文献：

.getElementsByTagName() at Mozilla Developer Center。

Answer 2

中的

$('body').html( $('body').html().replace(/(http:\/\/[^ ]+)/g,'<a href="$1">$1</a>/'));

Answer 3

您已经可以通过以下方式访问正文：

var x = document.body;

无需方法。

虽然有更好的方法来创建链接而不是销毁和重新创建整个DOM。此外，这会影响当前具有以href开头的http属性的元素。

编辑： 这是一种破坏性较小的方式来实现您的目标：

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

示例： http://jsfiddle.net/dVsqe/

或者没有jQuery：

var re = /(http:\/\/[^ ]+)/g;
var temp = document.createElement('div');

function createLinks( els ) {
    var nodes = els.childNodes, node;
    for( var i = 0; i < nodes.length; i++ ) {
        node = nodes[ i ];
        if( node.nodeType === 1 && node.nodeName !== 'script' ) {
            createLinks( node );
        } else if( node.nodeType === 3 && node.data.match( re ) ) {
            temp.innerHTML = node.data.replace( re, '<a href="$1">$1</a>' );
            while( temp.firstChild ) {
                node.parentNode.insertBefore( temp.firstChild, node );
            }
            node.parentNode.removeChild( node );
        }
    };
}

createLinks( document.body );

示例： http://jsfiddle.net/dVsqe/2/

我试图将http链接转换为正文加载的超链接

3 个答案: