0

Here is the code

<form method="get" name="form_delivery">

  Please select country for delivery<br>

  <select name="deliverymethod">
    <option value="0" selected="selected">Select country / region</option>
    <option value="1">UK (incl. Northern Ireland)</option>
    <option value="8">Australia</option>
    <option value="9">New Zealand</option>
  </select>

</form>

I need to identify the text "Please select country for delivery" and wrap it around the container like a "span" and replace the wrapped text

<form method="get" name="form_delivery">

   <span>Please select country for delivery</span><br>

This code is generated by an automated server, I only have access to HTML Template hence Jquery is the only option for making modifications on the fly.

Any Idea's?

Clain Dsilva
  • 1,631
  • 3
  • 25
  • 34
  • 1
    Have a look here, this is very similar -> http://stackoverflow.com/questions/16090487/find-a-string-of-text-in-an-element-and-wrap-some-span-tags-round-it – Mark Walters Nov 25 '14 at 09:50

3 Answers3

1

Two solutions here :

1 : If you don't have any binding on other elements of the form, you may simply do a replace of the HTML :

$('form').html(function(_,h){
     var t = "Please select country for delivery";
     return h.replace(t, '<span>'+t+'</span>');
});

2 : If you have bindings, you can't do that as it would delete all elements, you need to do it cleanly, not modifying other elements. You may use a library for that like my own groumf :

Groumf.replaceTextWithHTMLInHTML(document.body, t, function(s){
    return '<span>'+t+'</span>'
});
Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • 1
    I like the Groumf code but it adds a dependency of another library. On the first solution what does the '_' do on the index position? I am just curious to know. – Clain Dsilva Nov 25 '14 at 12:11
  • 1
    `_` is just a variable name chosen to look like a place-holder. You might have used `i` instead. It's just an habit I took from other languages where you can specify `_` where you don't want to use a variable. – Denys Séguret Nov 25 '14 at 12:11
  • Interesting...!! the first solution removed some binding it seems, the select's on change event is not firing for some reason. But thanks for the answer, I can take it from where you stopped. I learned something new. – Clain Dsilva Nov 25 '14 at 12:18
  • @ClainDsilva Another solution would be to not have any direct binding but only use validation (see [here](http://stackoverflow.com/questions/15090942/jquery-on-method-not-working-on-dynamic-content) ). – Denys Séguret Nov 25 '14 at 12:20
  • Binding are made from a pre build script that is executed on dom ready. I am writing a parallel script on custom script file which is loaded along with the template. Thanks for the pointer , that was really useful – Clain Dsilva Nov 25 '14 at 12:32
  • I am Accepting your answer as it have the best insights to the problem most certainly guided me to the solution. – Clain Dsilva Nov 26 '14 at 15:46
1

If you know that the text is the first part of the form, you can use $($('form').get(0).childNodes[0]).wrap('<span>');.

rdubya
  • 2,916
  • 1
  • 16
  • 20
1

You can use contents() to get the text nodes as well as the HTML elements using jQuery. You can then filter out the text nodes, using .filter() (which might be unnecessary, depending on your potential markup) and then get what I'm assuming will always be the first text node, using .eq().

From there we can wrap this text node in a <span> using .wrap(), traverse to this new <span>, and prepend it to our form:

var $form = $('form[name=form_delivery]')
$form.contents().filter(function(){
    return this.nodeType == 3;
}).eq(0).wrapAll('<span></span>').closest('span').prependTo($form);

JSFiddle

George
  • 36,413
  • 9
  • 66
  • 103