replace text string with span using jQuery

Question

How can I find the string and wrap it into span using jQuery? For example,

<p>
  <span class="span1">afijaifjiaj</span>
  ajfijaogoag
  <span class="span1">afijaifjiaj</span>
  aokaodgg
  <span class="span1">afijaifjiaj</span>
</p>

I want to make it as:

<p>
  <span class="span1">afijaifjiaj</span>
  <span class="span2">ajfijaogoag</span>
  <span class="span1">afijaifjiaj</span>
  <span class="span2">aokaodgg</span>
  <span class="span1">afijaifjiaj</span>
</p>

Try using this selector: $('*:contains("I am a simple string")'); — Stephen Raghunath
– Stephen Raghunath, Commented Oct 20, 2013 at 22:57

Tats_innit · Accepted Answer · 2013-10-20 23:00:38Z

2

Try this: http://jsfiddle.net/3nxjk/ or http://jsfiddle.net/3nxjk/3/

nodeType - 3 Represents textual content in an element or attribute.

and $(this).text().trim() trims white space and checks the valid string.

Rest should fit your need :)

Code

$(document).ready(function () {
    $("p").contents().filter(function () {
        return this.nodeType === 3 && $(this).text().trim() != "";
    }).wrap('<span class="span2">');

    alert($('p').html());
});

answered Oct 20, 2013 at 23:00

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dvir Over a year ago

what is nodeType === 3 mean?

Tats_innit Over a year ago

@Dvir check this out : developer.mozilla.org/en-US/docs/Web/API/… :) The nodeType property returns the node type, as a number, of the specified node.

David Thomas Over a year ago

Depending on cross-browser requirements, it might be worth using $.trim($(this).text()) rather than using String.trim() (it's unsupported in IE < 9).

markasoftware · Accepted Answer · 2013-10-20 22:53:41Z

0

I don't really know jQuery, so here's a way with pure JavaScript:

var stringToReplace='randomtext';
dpcument.body.innerHTML=document.body.innerHTML.replace(stringToReplace,'<span>'+stringToReplace+'</span>');

answered Oct 20, 2013 at 22:53

markasoftware

12.7k8 gold badges47 silver badges72 bronze badges

Collectives™ on Stack Overflow

replace text string with span using jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related