Jump to content

Remove Text Nodes After Newly Inserted Span Elements

Recommended Posts

I created a simple search box on my page. When the user makes a search, it takes the search term and finds it within a block of text. Whenever that search term is found, it is replaced by the same term wrapped in a span tag with a given class to highlight it in yellow. It works, but every time I insert new span elements within the block of text, it inserts a text node after it, causing there to be a space, and breaking up words. Can this be fixed using CSS?

  • Like 1
Link to post
Share on other sites

I found out what I was doing wrong. I created a template in my HTML like this:

<script type="template" id="spanTmpl">   <span style="background-color:yellow;">{{match}}</span></script>

and I was replacing {{match}} with the actual value. However, there is a text node before and after the span tag within that script block. If I put it all on one line, I dont have the text nodes anymore. I actually didn't think I was adding the text nodes until you suggested that I might be, so thanks! Here is a jsbin if you want to see a quick demo of what I was doing: http://jsbin.com/iwu...javascript,html

Edited by big dave
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...