从字符串jQuery中提取前n个单词,在jQuery中提取Wordpress样式摘录(x个字数

Question

我有一个小的jQuery片段,但是为了改进我的JS,我想了解如何提高效率.

此功能缩短了WordPress摘录.它需要原始的WordPress摘录并提取前40个单词......这就是我关心的部分.之后,它会在原始摘录的末尾添加"继续阅读"链接,并将其添加到截断版本的末尾.

再一次,我只是想知道什么是更快/更简洁的方式来返回截断的摘录.我试过'切片'并得到了一堆逗号.

jQuery('.page-id-7 .promo_slider_excerpt').each(function (i) {
    var s = jQuery(this).html();
    var sw = s.split(' '); // separate contents into array of words
    var t = [];
    var v;
    if (sw.length > 40) {
        var a = jQuery(this).children('a'); // this is the Continue Reading link
        for (v = 0; v < 40; v++) {
            t = (t + ' ' + sw[v]); // Build the shortened excerpt (this is the part I wanted to improve)
        }
        t = (t + ' ' + a[0].outerHTML); // Add the Continue Reading onto the end
        jQuery(this).html(t);
    } else {
        t = s;
        jQuery(this).html(t);
    }
});

Answer 1

对于前四十个单词和继续阅读链接,我建议:

var s = jQuery(this).text(),
    fortyWords = s.split(' ').slice(0,39).join(' '),
    link = document.createElement('a'),
    linkText = document.createTextNode('continue reading');
link.href = 'http://path.to.article/';
link.appendChild(linkText);
$(this).text(fortyWords).append(link);

JS小提琴概念证明.

编辑以回应OP的进一步问题(在下面的评论中):

1:Firebug中有没有办法记录一种技术与另一种技术的效率？IOW:你的例子看起来不错,但我可以比较它的内存和速度与我的for循环吗？

老实说,我不知道,我恐怕根本就没有使用Firefox,虽然我几乎完全使用Chromium,但我还没有使用它足够长的时间来发现内存使用或速度的分析工具.

但是,有一个JS Perf,它允许你运行测试来显示特定方法的操作速度; 虽然它根本没有触及内存使用.

2:我的版本使用.html()方法和.outerHTML属性.我一直在网上看到这些不是 - 总是可靠的帖子.那是IE6的一些保留吗？我的用户都非常流行,所以我想知道为什么你选择使用.text()然后追加一个节点？

html()是一种很好的使用方法,但理想情况下只有在你想使用字符串格式的html时才能使用它; 在上面的例子中,使用字符串似乎更容易,因为我真正想要使用的是文本字符串.曾经有过它的元素中的其他元素text(),我操纵,然后I'd've必须使用html(),否则这些元素会一直写/替换文本到DOM时覆盖.

我似乎记得在outerHTML历史上并没有取得多大成功,坦率地说,凭经验.所以我很少想到使用它,尽管它只是个人偏好的问题.至于它是IE 6的延续？我不确定; 我不会感到惊讶,但不幸的是,我完全不知道.

我之所以选择使用text()是因为正如所指出的那样,我正在使用文本; 然后我单独添加节点,html()因为我插入了一个html节点.如果我使用完全相同的内容,html()那么我认为它会起作用.但是,再次,只是个人偏好,我认为,它清楚地表明我是在操纵/使用文本还是HTML.

参考文献:

• jQuery的:
  • append().
  • slice().
  • text().
• '普通'非库JavaScript:
  • appendChild().
  • document.createElement().
  • document.createTextNode().
  • join().
  • slice().
  • split().