javascript - 鼠标悬停时对文本/单词的缩放效果

我在其他地方找不到解决我问题的方法，这里是：

我想要的功能是，当用户将鼠标悬停在一组3-4个单词上时，它会放大。
到目前为止，我仅设法进行了硬编码，这意味着我用span元素拆分了所有文本，并在css中添加了功能。但是我知道这很糟糕：


变得凌乱/看起来很丑
无法在大文字的
很难添加更多文本


因此，我想要一种自动执行此“跨分隔文本”的方法，也许使用正则表达式。但是我不知道如何。
这是我到目前为止提出的

body {
    padding: 10px;
    margin: 10px;
}

h1 {
    font-family: Arial;
    font-size: 20px;
    color: #000000;
}

h1 span {
    display: inline-block;
    -webkit-transition: all 0.1s ease-out;
}

h1 span:hover {
    -webkit-transform: scale(1.5);
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    cursor: pointer;
}

<h1>
<p>Yesterday i went out at a festival where i ate a lot of corn</p>
<!--I just split the text with span elements.  -->
<p><span>Yesterday i went</span> <span>out at a festival</span> <span>where i ate</span> <span>a lot of corn</span></p>
</h1>

最佳答案

我真的不知道缩放，但是如果您想将文本分成3个单词的组，用来换行，则可以使用jquery并执行以下操作：

var p = $('p'); //selector
var originalText = p.text().split(' '); //original text between <p></p>
var spannedText = [];

for (var i = 0; i < originalText.length; i += 3) { //per group of 3 words
 spannedText[i] = ('<span>' + originalText.slice(i,i+3).join(' ') + '</span>'); //wrap the 3 words with <span></span>
}

$(p).html(spannedText.join(' ')); //display the new wrapped text

https://jsfiddle.net/hjmoc1mq/3/