Javascript，jQuery：将某个 div 的某个单词更改为<span>带有函数的 a</span>

Question

I want to turn this

<div id='theDiv'>I love potatoes</div>

into this:

<div>I love <span id='potatoesSpan'>potatoes</span></div>

with this function:

turnWordIntoSpan("#theDiv","potatoes");

So the function would search for the searchedWord (in this case potatoes ) in the element with the id wrapId (in this case #theDiv ) and replace it for a span with the id "#" + searchedWord + "Span" .

How can I do it? I had some methods presented to me that seem way too complicated and that is why I'm asking here.

Answer 1

You can use html() and replace() for that

 function turnWordIntoSpan(id, replace) { $(id).html(function(i, v) { return v.replace(replace, "<span id='potatoesSpan'>$&</span>"); }) } turnWordIntoSpan("#theDiv", "potatoes");

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id='theDiv'>I love potatoes</div>

Update : The above solution cause several problems, that it will remove event handler from inner elements. So you can do something like this, which only replace content in textNode

 function turnWordIntoSpan(id, replace) { var add = 0; $(id).contents() // contents() for getting descentant including textnode .each(function(i) { // each() for iterating over elements if (this.nodeType === 3) { // checking node is textnode var child = this; var parent = this.parentNode; // getting it's parent node var split = this.nodeValue.split(replace); // spliting string based on the replace parameter if (replace.length > 1) { split.forEach(function(v, ind) { // iterating over splited string if (ind == 0) child.nodeValue = v; else { var text = document.createTextNode(v); // creating textnode parent.insertBefore(text, child.nextSibling); // insering into parent child = text; } if (ind != split.length - 1) { var sp1 = document.createElement("span"); // creating span sp1.style.color = 'red'; sp1.innerHTML = replace; // setting span content parent.insertBefore(sp1, child.nextSibling); // insering span into parent node child = sp1; } }); } } }); } turnWordIntoSpan("#theDiv", "potatoes");

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id='theDiv'>I love potatoes hjhghgh potatoes bvbb <span>jhjghjj</span> potatoes hhhhh <div>jhjh</div>dhsjhdjshdjshj potatoes hgdhgh xcxcxcx</div>