Question

我有html：

<div>
    <div>Text1 Text2</div> 
    <div>
        Text2 
        <ul>
            <li>Text3</li>
        </ul>
        Text4 Text5
    </div>
</div>

我想在<span>.</span>上的所有元素中查找所有空格（仅在文本节点中）。最终的HTML应如下所示：

<div>
    <div>Text1<span>.</span>Text2</div> 
    <div>
        Text2 
        <ul>
            <li>Text3</li>
        </ul>
        Text4<span>.</span>Text5
    </div>
</div>

我如何使用jquery或没有它？

Answer 1

这是一个可能的jQuery解决方案：

$('div *').contents().filter(function() {
    // get only non-empty text nodes
    return this.nodeType === 3
        && $.trim(this.nodeValue).length;
}).replaceWith(function() {
    // replace all spaces with the corresponding markup
    return $.trim(this.nodeValue).replace(/\s+/g, '<span>.</span>');
});

DEMO： http://jsfiddle.net/9NL98/

Answer 2

试试这个..

$('div').contents().each(function() {
    console.log(this);
    this.data = this.data.replace(/ /g, '<span>.</span>');
});

如何更改span元素上的所有空格

2 个答案: