javascript - 交换单词跨度

Question

我有一些这样的跨度:

<span class="test">word1 word2 @ different content test </span>
<span class="test">word3 word4 @ different content test343wer</span>
<span class="test">example54 example98 @ different content3453</span>
<span class="test">word13 word92 @ different content1111111</span>
<span class="test">word223 word14 @ different content00</span>

我需要这个输出:

<span class="test">word2 word1</span>
<span class="test">word4 word3</span>
<span class="test">example98 example54</span>
<span class="test">word92 word13</span>
<span class="test">word14 word223</span>

请注意，前两个单词已交换位置，并且 @ 中的所有内容都被删除。

我已经用这段代码进行了测试，但它不完整并且无法工作。它使用 ID 而不是 CLASS:

var datetime = document.getElementById('test').innerHTML;
var date = datetime.substr(0, datetime.indexOf('@')).trim();      
var reverse = date.split(" ");
reverse.reverse();
var result = (reverse[0] + ' ' + reverse[1])
console.log(result);

跨度的数量可能会有所不同

感谢您的帮助:)

Answer 1

实现此目的的最简单方法是按空格split()文本，获取结果数组的前两个元素，反转它们，然后将它们重新连接到一个字符串中，像这样的东西:

$('.test').text(function(i, t) {
  return t.trim().split(' ').slice(0, 2).reverse().join(' ');
})

span { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="test">word1 word2 @ different content</span>
<span class="test">word3 word4 @ different content</span>
<span class="test">example54 example98 @ different content</span>
<span class="test">word13 word92 @ different content</span>
<span class="test">word223 word14 @ different content</span>