jQueryで指定文字数を抜き出してタグで囲いたい

よろしくお願いいたします。
CMS(wordpress)等で書き出されるテキストの一部（文字数指定で）をspanタグなどで
囲みたいと思っています。
書き出されるテキスト全体には、テンプレートなどでタグを指定することができますが、
テキストの一部にspanタグを設定するため、jQueryで試してみるのですがうまくいきません。
お知恵をお借りしたいと思います。

###やりたいこと、

html
1【現状】
2<p class="headDescript">ダミー文、こちらにCMSからのテキストが表示されます。</p>
3↓
4【目的】
5<p class="headDescript"><span class="test">ダミー文、</span>こちらにCMSからのテキストが表示されます。</p>

###試したjQueryコード

javascript
1<script>
2  jQuery(function(){
3    var str = jQuery(".headDescript").text();
4    var txt = str.slice(0,5);
5    jQuery(txt).wrap("<span class="test"></span>");
6  });
7</script>

wrapメソッドだけでは選択肢にタグがないと囲むことができないともありました。
何か方法がありましたらご教授戴ければ幸いです。
何卒よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。
ベタなコードですが、これで目的は達成できてますでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>teratail.com/questions/50268</title>
6    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
7    <script>
8        jQuery(function(){
9            jQuery(".headDescript").each(function(){
10                var head = $(this).text().slice(0,5);
11                var tail = $(this).text().slice(5);
12
13                jQuery(this).empty();
14                jQuery(this).append(jQuery('<span class="test">').text(head)).append(tail);
15
16            });
17        });
18    </script>
19    <style>
20        .test {
21            color: blue;
22        }
23    </style>
24</head>
25<body>
26<p class="headDescript">ダミー文、こちらにCMSからのテキストが表示されます。</p>
27<p class="headDescript">ダミー文、こちらにCMSからのテキストが表示されます。</p>
28<p class="headDescript">ダミー文、こちらにCMSからのテキストが表示されます。</p>
29</body>
30</html>