Javascript 如何将文本节点拆分为每个3个单词的跨距？

假设我有这个部门：

<div> Let's say these are the words in my div </div>

然后简单地

.join（“”）

数组以形成一个字符串和

$（“div”）.html（字符串）

---

2） 或者我可以在使用

text（）获取后简单地使用正则表达式：

对包含
一个单词+一个空格+一个单词+一个空格+另一个单词的表达式进行全局搜索

/（\w+\s+\w+\s+\w+/g

将其替换为包裹在跨距中的

$1

和
html（）
执行
$（“div”）.contents（）


这些就是我想到的，我想知道，除了这些，还有更好的方法吗

实现这一目标的最佳方式是什么（最快&需要最少的内存）
 这应该是你想要的：

此处演示：

$（“div”）。每个（函数（）{
var out=[]；
var words=$（this.text（）…trim（）.split（“”）；
对于（变量i=0；i

以下是DOM版本（无jQuery）：

此处演示：

var divs=document.getElementsByTagName（'div'）；
对于（变量i=0；i

最后，这里是一个DOM+RegEx版本。。。这应该是您的最佳执行者：

演示：

var divs=document.getElementsByTagName（'div'）；
对于（变量i=0；i
性能：

var elems = document.getElementsByTagName('div');

for (var j=elems.length; j--;) {
    var txtArr = elems[j].textContent.replace(/([a-zA-Z]+)\s([a-zA-Z]+)\s([a-zA-Z]+)/g, '$1 $2 $3* ').split('*'),
        txtElm = document.createDocumentFragment(),
        span   = document.createElement('span');

    for (i=0; i<txtArr.length; i++) {
        if (/\S/.test(txtArr[i])) {
            var sp   = span.cloneNode(true),
                text = document.createTextNode(txtArr[i]);

            sp.appendChild(text);
            txtElm.appendChild(sp);
        }
    }

    elems[j].innerHTML = '';
    elems[j].appendChild(txtElm)
}
​

var elems=document.getElementsByTagName（'div'）；
对于（var j=elems.length；j--；）{
var txtArr=elems[j].textContent.replace（/（[a-zA-Z]+）\s（[a-zA-Z]+）\s（[a-zA-Z]+）/g，“$1$2$3*”）.split（“*”），
txtElm=document.createDocumentFragment（），
span=document.createElement（'span'）；
对于（i=0；我假设连接版本会更快，因为它没有运行“复杂”的正则表达式计算，但是，据我所知（我自己也没有运行测试），在JS中运行多个连接是一个非常昂贵的过程（我相信我在中读到了）。所以，是的，我没有答案。：）如果你写的东西能起作用，它可能比jQuery版本快，但你也需要考虑开发人员大脑中的“执行”情况。@greg5green是的：）Arch，最好使用jQuery之类的框架来处理DOM内容，因为它可以处理较旧的
document.layers
（NS4）和
document.all
（IE4）实现。我知道它将影响1/1000000个用户，但实际上不会增加太多开销，并确保可靠性。Arch：无论如何，用直接的DOM版本更新了我的答案，供您参考：）DOM操作会比字符串/数组操作更快吗？我敢打赌不会；）@TheSmose-让我们试试看->很好.+1。FTI，我的正则表达式1已修复：@TheSmose-无法使最后一个正常工作，也没有花任何时间修复它，但我的浏览器速度仍然最快，但这确实是因为使用了f只修改DOM一次（技术上是两次），这就是像这样的函数的滞后之处。
<div>
    <span class="wrapper">Let's say these</span>
    <span class="wrapper">are the words</span>
    <span class="wrapper">in my div</span>
</div>

var a = 0;
var b = array.length;
while (a<b) {
    array[a] = "<span class="wrapper>" +  array[a]";
    a +=2;
    if (a>b) {
        a = b-1;
    }
    array[a] = array[a] + "</span>";
    a++;
}

$("div").each(function() {
    var out = [];
    var words = $(this).text()..trim().split(' ');
    for (var i = 0; i < words.length; i += 3) {
        out.push('<span class="wrapper">' + words.slice(i, i+3).join(' ') + '</span>');
    }
    $(this).html(out.join(' '));
});

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
    var out = [];
    var words = divs[i].innerText.trim().split(' ');
    for (var j = 0; j < words.length; j += 3) {
        out.push('<span class="wrapper">' + words.slice(j, j+3).join(' ') + '</span>');
    }
    divs[i].innerHTML = out.join(' ');
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
    divs[i].innerHTML = '<span class="wrapper">' 
            + divs[i].innerText.trim().replace(/(([^\s]+\s+){2}[^\s]+)\s+/g, '$1</span> <span class="wrapper">')
            + '</span>';
}​

var elems = document.getElementsByTagName('div');

for (var j=elems.length; j--;) {
    var txtArr = elems[j].textContent.replace(/([a-zA-Z]+)\s([a-zA-Z]+)\s([a-zA-Z]+)/g, '$1 $2 $3* ').split('*'),
        txtElm = document.createDocumentFragment(),
        span   = document.createElement('span');

    for (i=0; i<txtArr.length; i++) {
        if (/\S/.test(txtArr[i])) {
            var sp   = span.cloneNode(true),
                text = document.createTextNode(txtArr[i]);

            sp.appendChild(text);
            txtElm.appendChild(sp);
        }
    }

    elems[j].innerHTML = '';
    elems[j].appendChild(txtElm)
}
​