javascript - 如何在 div 中设置第三个单词的样式并在新代码的一部分中使用该文本？

Question

<span class="myclass">
    one two three
</span>
<span class="myclass">
    four fix six
</span>
<span class="myclass">
    seven eight nine
</span>

所以我有这个工作代码来设置第一个单词的样式。

    $('.myclass').each(function() {
        var word = $(this).html();
        var index = word.indexOf(' ');
        if(index == -1) {
            index = word.length;
        }
        $(this).html('<span class="aspanclass2">' + word.substring(0, index) + '</span>' + word.substring(index, word.length));
    });

该代码的结果是这样的，这正是我想要的第一个词:

<span class="myclass">
    <span class="aspanclass2">one</span> two three
</span>
<span class="myclass">
    <span class="aspanclass2">four</span> five six
</span>
<span class="myclass">
    <span class="aspanclass2">seven</span> eight nine
</span>

---

---

但是，我还需要为第三个词设置样式。此外，我想使用第三个单词的文本作为样式的一部分添加到它，所以最后看起来像这样:

<span class="myclass">
    <span class="aspanclass2">one</span> two <a href="http://zzzzz.com/three">three</a>
</span>
<span class="myclass">
    <span class="aspanclass2">four</span> five <a href="http://zzzzz.com/six">six</a>
</span>
<span class="myclass">
    <span class="aspanclass2">seven</span> eight <a href="http://zzzzz.com/nine">nine</a>
</span>

我尝试了几件事，但没有用。请帮忙。

(第三个词，而不是第二个词。此外，文本发生变化，不仅仅是文本“六”或“九”，它在每次重新加载页面时都会发生变化。所以只有第三个词不是那么无关紧要谈论用不同的词替换一个词的链接。)

Answer 1

我实际上会使用 split 将您的 span 文本分解为单个单词的数组，操作单个元素并将其重新连接起来并将其添加回DOM-

$('.myclass').each(function(index, me) {
  var words = $(me).text().trim().split(' ');
  words[0] = '<span class="aspanclass2">' + words[0] + '</span>';
  words[2] = '<a href="http://zzzzz.com/' + words[2] + '">' + words[2] + '</a>';
  $(me).html(words.join(' '));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="myclass">
    one two three
</span>
<span class="myclass">
    four fix six
</span>
<span class="myclass">
    seven eight nine
</span>