jquery - 从字符串 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 Fiddle proof of concept .

<小时/>

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

1: Is there a way in Firebug to note the -efficiency- of one technique vs. another? IOW: your example looks good, but can I compare it's memory and speed vs my for loop?

我真的不知道，恐怕我根本不使用 Firefox，虽然我几乎只使用 Chromium，但我使用它的时间还不够长，无法发现内存使用情况的分析工具或速度。

但是，JS Perf ，这将允许您运行测试以显示特定方法的运行速度；尽管它根本不涉及内存使用。

2: My version uses the .html() method and .outerHTML property. I keep seeing posts on the web that these are not -always- reliable. Is that some holdover from IE6? My users are all pretty current so I wonder why you choose to use .text() and then append a node?

html() 是一种很好的使用方法，但理想情况下仅当您想要使用字符串格式的 html 时才使用；在上面的情况下，使用字符串似乎更容易，因为我真正想要使用的是文本字符串。如果我正在操作的 text() 元素中还有其他元素，那么我必须使用 html() 否则这些元素会过度 -将文本写入/替换到 DOM 时写入。

我似乎记得历史上使用 outerHTML 并没有取得多大成功，坦率地说，从经验上来看。所以我很少考虑使用它，尽管这只是个人喜好的问题。至于它是 IE 6 的遗留物吗？我不确定；我不会感到惊讶，但不幸的是我根本不知道。

我选择使用text()，因为如前所述，我正在处理文本；然后我在 html() 中单独附加了该节点，因为我插入了一个 html 节点。如果我完全使用 html() 传递相同的内容，那么我认为它会起作用。但是，这只是个人喜好，而且我认为，它清楚地表明我正在操作/使用文本还是 html。

引用文献:

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