如何用jQuery为不同数量的字符串前若干单词包裹span标签？

你的思路方向是对的，但核心问题出在最后一步——你不能直接对纯文本字符串调用jQuery的wrap()方法，因为这个方法是针对DOM元素设计的，不是用来处理普通文本的。我们需要把拆分后的单词重新拼接成带span标签的HTML结构，再替换原元素的内容。

修正后的完整代码 #

$('.title-js').each(function(){
    // 获取当前元素的文本并去除首尾多余空格
    const titleText = $(this).text().trim();
    // 分割成单词数组（用正则/\s+/处理单词间多个空格的情况，避免产生空元素）
    const words = titleText.split(/\s+/);
    // 计算要包裹的单词数量，用Math.floor确保取整（比如总单词数为5时，取前2个）
    const wrapCount = Math.floor(words.length / 2);
    
    // 只有当需要包裹的单词数大于0时才执行替换
    if (wrapCount > 0) {
        // 把前wrapCount个单词用span标签包裹
        const wrappedPart = `<span>${words.slice(0, wrapCount).join(' ')}</span>`;
        // 保留剩下的单词部分
        const remainingPart = words.slice(wrapCount).join(' ');
        // 拼接成完整HTML并替换原元素的内容
        $(this).html(`${wrappedPart} ${remainingPart}`);
    }
});

关键优化说明 #

• 替换split(' ')为split(/\s+/)：可以兼容单词间有多个空格的场景，避免分割出空的数组元素
• 直接拼接HTML字符串并使用html()方法更新：这是修改元素内部结构的正确方式，替代了你之前对纯文本调用wrap()的错误操作
• 增加if (wrapCount > 0)判断：避免当标题只有1个单词时做无意义的操作

扩展用法 #

如果需要给span标签添加类名或样式，直接在标签里补充即可，比如：

const wrappedPart = `<span class="title-highlight">${words.slice(0, wrapCount).join(' ')}</span>`;

内容的提问来源于stack exchange，提问作者Yaroslav Saenko