html - 查找未被任何 HTML 标签包围的文本

Question

嗨，我有一个非常独特的要求。我需要从没有被任何标签包围的 div 中找出文本，然后一旦我有了它，我需要用 div 包围它并给它一个 CSS 类。

例如:

<div class="pagingCss" id="footer">
    <a href="/XXX/Home/Results?page=1">1</a>        
    <a href="/XXX/Home/Results?page=6">6</a>
    7 
    <a href="/XXX/Home/Results?page=8">8</a>        
</div>

所以我希望我的代码做的是找到这个数字 7(在本例中)，然后用 span 标签和类似的类将其包围:

<div class="pagingCss" id="footer">
    <a href="/XXX/Home/Results?page=1">1</a>        
    <a href="/XXX/Home/Results?page=6">6</a>
    <span class="someClass">7</span>
    <a href="/XXX/Home/Results?page=8">8</a>        
</div>

我所做的一切都是因为我无法为无标签文本获得正确的间距，您可以在所附的屏幕截图中看到

屏幕截图链接:http://yassershaikh.com/wp-content/uploads/2012/02/paging.png

Answer 1

你可以试试这个

var footer = document.getElementById("footer");
var nodes=footer.childNodes;
for(i=0;i<nodes.length;i++)
{
    if(parseInt(nodes[i].nodeValue)>0) 
    {
        var span = document.createElement("span")
        span.setAttribute("class","active");
        span.appendChild(document.createTextNode(nodes[i].nodeValue));
        footer.replaceChild(span , nodes[i]);
    }
}

这是一个 fiddle link .