如何在不使用jQuery的情况下围绕文本部分包装范围

Question

<p>Lorem Ipsum <a href="#">Link</a> <div ... </div> </p>

我想在不使用jQuery 的情况下放置'Lorem Ipsum' ,所以结果如下:

<p><span>Lorem Ipsum </span><a href="#">Link</a> <div ... </div> </p>

有任何想法吗？谢谢

Answer 1

首先,您需要某种方式来访问该段落.您可能想给它一个id属性,例如"foo":

<p id="foo">Lorem Ipsum <a href="#">Link</a> <div ... </div> </p>

然后,您可以使用document.getElementById访问该元素并根据需要替换其子元素:

var p = document.getElementById('foo'),
    firstTextNode = p.firstChild,
    newSpan = document.createElement('span');

// Append "Lorem Ipsum" text to new span:
newSpan.appendChild( document.createTextNode(firstTextNode.nodeValue) );

// Replace old text node with new span:
p.replaceChild( newSpan, firstTextNode );

为了使其更可靠,您可能希望p.normalize()在访问第一个子项之前调用,以确保将锚点之前的所有文本节点合并为一个.

Oook,所以你想用一个元素替换一个文本节点的一部分.这是我如何做到的:

function giveMeDOM(html) {

    var div = document.createElement('div'),
        frag = document.createDocumentFragment();

    div.innerHTML = html;

    while (div.firstChild) {
        frag.appendChild( div.firstChild );
    }

    return frag;
}

var p = document.getElementById('foo'),
    firstChild = p.firstChild;

// Merge adjacent text nodes:
p.normalize();

// Get new DOM structure:
var newStructure = giveMeDOM( firstChild.nodeValue.replace(/Lorem Ipsum/i, '<span>$&</span>') );

// Replace first child with new DOM structure:
p.replaceChild( newStructure, firstChild );

使用低级别的节点是一个令人讨厌的情况; 特别是没有任何抽象来帮助你.我试图通过从替换的"Lorem Ipsum"短语产生的HTML字符串中创建DOM节点来保持正常感.纯粹主义者可能不喜欢这种解决方案,但我发现它非常合适.

编辑:现在使用文档片段!谢谢Crescent Fresh!