jQuery wrap only around string

Question

I'm working on some jQuery code to turn:

 <blockquote> Quote <cite>Author</cite> </blockquote> 

into:

 <blockquote> <q>Quote</q> <cite>Author</cite> </blockquote> 

So far I've been trying to loop through each block quote, detach the <cite> element, use jQueries wrapInner function to wrap the remaining string in the <q> element, then reattach the <cite> element.

The ultimate goal is to do something like this <http://24ways.org/2005/swooshy-curly-quotes-without-images/> . Except using jQuery to automate the placement of .bqstart & .bqend .

Answer 1

You can check the nodeType property of the childNode s, if the value is 3, then the node is a textNode .

$('blockquote').contents().filter(function() {
   return this.nodeType === 3 && $.trim(this.nodeValue).length;
}).wrap('<q/>');

Answer 2

If your blockquote elements all have the same structure it's pretty easy to do. Providing the answer in plain JS/ no jQuery. Benefit over string methods like Faiz' answer is that it's non-destructive, so it's (marginally) faster (browser doesn't need to rebuild the DOM) & it preserves data bound to the element (ie, event listeners)

function wrapQuotes() {
  var quotes = document.getElementsByTagName('blockquote'), quote, qEl;
  for (var i = 0; i < quotes.length; i++) {
    quote = quotes[i].firstChild;
    // if the structure is always the same, you can leave out this if clause
    if (quote.nodeType === 3) { 
      qEl = document.createElement('q');
      qEl.appendChild(quote); // or .childNodes[0]
      quotes[i].insertBefore(qEl, quotes[i].firstChild);
    }
  }
}
wrapQuotes();

Answer 3

I'm guessing a little bit here, but are you wanting:

$('blockquote')
    .wrapInner('<q>')
    .find('cite')
    .each(function ea(){
        $(this).appendTo($(this).closest('blockquote'));
    });

http://jsfiddle.net/532At/