Build Javascript Variable Using jquery Manipulation

Question

I need to build a string variable using jQuery to find all the text nodes surrounded by span tags. Importantly I need to separate each segment of text with the pipe character "|".

For example take the following html:

<div id="myDiv">
<span>this</span> <span>is</span> <span>the</span> <span>text</span>
</div>

Using jQuery I need to produce the following:

var my_variable = "this|is|the|text";

So far I have the following jQuery statement but this just adds the pipe character at the end and doesn't separate each segment of text.

var my_variable = $("#myDiv").find("span").text() + '|';

Any help would be very much appreciated.

Note: To remove the last pipe character at the end of the string I was going to use:

my_new_variable = "my_variable.slice(0, -1)";

cletus · Accepted Answer · 2010-02-11 02:37:25Z

6

You can use map() on the element of spans to get the text. Javascript arrays have a join() method that will put the pipes between them but first you need to convert your jQuery object into a Javascript array. Use $.makeArray() for this.

var my_variable = $.makeArray($("#myDiv span").map(function() {
  return $(this).text();
})).join("|");

edited Feb 11, 2010 at 2:37

answered Feb 11, 2010 at 2:31

cletus

627k169 gold badges922 silver badges945 bronze badges

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

4 Comments

user270778 Over a year ago

I get the following error: TypeError: Result of expression '$("#myDiv").find("span").map(function() { return $(this).text(); }).join' [undefined] is not a function.

user270778 Over a year ago

Thanks very much for the reply - very close except I get a double "|" between each text string.

cletus Over a year ago

@hayler: when i run it i get this|is|the|text. I see no double pipes.

user270778 Over a year ago

Yup, my bad.... I had a number of empty spans... Thanks very much for the super quick response.

artlung · Accepted Answer · 2010-02-11 02:42:39Z

0

var strings = [];
$('#myDiv span').each(function(){
    strings.push($(this).text());
});
var my_variable = strings.join('|');

answered Feb 11, 2010 at 2:42

artlung

33.5k19 gold badges76 silver badges124 bronze badges

Comments

takrl · Accepted Answer · 2011-07-15 12:52:10Z

0

var pipeText="";

$('#myDiv span').each(function(){
  pipeText+=$(this).text() + "|";
});

pipeText = pipeText.slice(0, -1);

edited Jul 15, 2011 at 12:52

takrl

6,5003 gold badges63 silver badges71 bronze badges

answered Feb 11, 2010 at 3:32

JimB

3192 silver badges5 bronze badges

Collectives™ on Stack Overflow

Build Javascript Variable Using jquery Manipulation

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related