separate string with html into two strings

Question

I'm trying to separate a string with html and non-html in it into two strings.

My javascript string is:

<span>1x</span> Front-line zero tolerance productivity

I want this to be separated into two variables

var quantity = "1x";
var name = "Front-line zero tolerance productivity";

What kind of code are your trying to parse? Can there be nested tags? — MaxArt
– MaxArt, Commented Jun 12, 2012 at 21:56
I'm parsing the dom. The example is the only use case, nothing is nested. — ThomasReggi
– ThomasReggi, Commented Jun 12, 2012 at 21:58
It will always be a single nested span, followed by a space? — Sampson
– Sampson, Commented Jun 12, 2012 at 22:01

user278064 · Accepted Answer · 2012-06-12 22:00:53Z

5

Split when a <span> or </span> tag is found.

string = "<span>1x</span> Front-line zero tolerance productivity"

tokens = string.split(/<\/?span>/);  // returns ["", "1x", " Front-line zero tolerance productivity"]
var quantity = tokens[1]  // "1x"
var name = tokens[2];     // "Front-line zero tolerance productivity"

answered Jun 12, 2012 at 22:00

user278064

10.2k1 gold badge36 silver badges48 bronze badges

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

3 Comments

Selvakumar Arumugam Over a year ago

+1 for first correct answer :) As the OP mentioned clearly that it as a string. DEMO >> jsfiddle.net/skram/Agfyk/5 <<

Marko Over a year ago

What if the span isn't well formed or has a class? Would this fail?

user278064 Over a year ago

@Marko: Yes. It will. Like every other mathod which relies too much on the string format.

Marko · Accepted Answer · 2012-06-12 22:13:27Z

3

Simplest way would be to use jQuerys contents() given that you will always have this type of markup.

HTML

<div id="split-me">
    <span>1x</span> Front-line zero tolerance productivity
</div>

jQuery

var $contents = $("#split-me").contents();
var quantity = $contents.eq(1).text();
var name = $contents.eq(2).text();

Example

edited Jun 12, 2012 at 22:13

answered Jun 12, 2012 at 22:07

Marko

72.3k29 gold badges126 silver badges160 bronze badges

2 Comments

ThomasReggi Over a year ago

I like this answer! The indexing is off though 0 - 1 not 1 - 2

Marko Over a year ago

Thanks @ThomasReggi check out the demo, the index at 0 is an empty text node which is actually the space between the div an the span.

Selvakumar Arumugam · Accepted Answer · 2012-06-12 22:00:12Z

2

Assuming that the <span>1x</span> Front-line zero tolerance productivity is wrapped inside a div like below,

<div id="test">
    <span>1x</span> Front-line zero tolerance productivity
</div>

JS:

var $clonedTest = $('#test').clone();
var $span = $clonedTest.find('span');
var quality = $span.text();
$span.remove();
var name = $.trim($clonedTest.text());

DEMO: http://jsfiddle.net/skram/Agfyk/2/

answered Jun 12, 2012 at 22:00

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Comments

hannebaumsaway · Accepted Answer · 2012-06-12 22:10:58Z

0

This might not be very elegant, but you can use the javascript .replace() function for your second var, such as:

$(document).ready(function(){
    $('#outp').html('first: ' + $('#inp span').html() + '<br/>' +
                    'second: ' + $('#inp').html().replace($('#inp span').html(),''));
});

answered Jun 12, 2012 at 22:10

hannebaumsaway

2,7547 gold badges29 silver badges38 bronze badges

Comments

korko · Accepted Answer · 2012-06-12 22:15:57Z

0

Here is a more dynamic and modular function to get all subtext blocks you want

jQuery.fn.extend({
    texts: function() {
        var texts = [];
        var blocks = this.contents();
        $.each(blocks, function(i, block) {
            if(block.nodeName === '#text') {
                var data = $.trim(block.data);
                data && texts.push(data);
            } else {
                texts = jQuery.merge(texts, $(block).texts());
            }
        });
        return texts;
    }
});

$(function() {
    console.debug($('<span><span>1x</span> Front-line zero tolerance productivity</span>').texts());            
});

answered Jun 12, 2012 at 22:15

korko

6705 silver badges11 bronze badges

Comments

Sampson · Accepted Answer · 2012-06-12 22:23:05Z

0

Since the format of the string won't change, you can split on the first space to get the two parts. Then remove tags from the first returned element, and preserve the structure of the second half:

var str = "<span>1x</span> Front-line zero tolerance productivity";
var ndx = str.indexOf(" ");
var rst = []; // Array of results

rst.push( str.substr( 0,ndx ).replace(/<\/?.+?>/g,"") );
rst.push( str.substr( ndx+1 ) );

Which results in the following array:

["1x", "Front-line zero tolerance productivity"]

Fiddle: http://jsfiddle.net/jonathansampson/dBTKZ/

edited Jun 12, 2012 at 22:23

answered Jun 12, 2012 at 21:59

Sampson

269k76 gold badges546 silver badges570 bronze badges

Comments

Matt Coughlin · Accepted Answer · 2012-06-12 22:37:20Z

0

<div class="container">
    <span>1x</span> Front-line zero tolerance productivity
</div>

<script type="text/javascript">
var matches = $('.container').html().match(/<span>(.*)<\/span> ?(.*)/);

var spanText = matches[1];   // 1x
var textNode = matches[2];   // Front-line zero tolerance productivity
</script>

answered Jun 12, 2012 at 22:37

Matt Coughlin

18.9k3 gold badges48 silver badges59 bronze badges

Collectives™ on Stack Overflow

separate string with html into two strings

7 Answers 7

3 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related