Wrap index of character in string in span tag with class javascript
<p>I have an element with a string like this:</p>

<pre><code>&lt;p&gt;I like trains and planes&lt;/p&gt;
</code></pre>

<p>I get it's text with jQuery <code>.text()</code> and save it in a string.</p>

<pre><code>var str = $('p').text();
</code></pre>

<p>I want to find for example the "k" with <code>str[5]</code> and replace the inner HTML of <code>&lt;p&gt;</code> to wrap it around a <code>&lt;span&gt;</code> tag with the class "red" for example. So I can style it. I found <a href="https://stackoverflow.com/questions/16090487/find-a-string-of-text-in-an-element-and-wrap-some-span-tags-round-it#">this</a> solution but its answer uses a regex, and I want the letter to add a span wrap to be variable.</p>

<p>How can I achieve this?</p>

<p>PS: I want to for example change this:</p>

<pre><code>&lt;p&gt;I like trains and planes&lt;/p&gt;
</code></pre>

<p>to this:</p>

<pre><code>&lt;p&gt;I li&lt;span class="red"&gt;k&lt;/span&gt;e trains and planes&lt;/p&gt;
</code></pre>

<p>But I don't want to find the "k", because they may be a lot of "k" characters, I want to find the character number <code>x</code> in the element.</p>