CODEWITHSUNDEEP
javascriptjqueryhtmlregex
Ankit Shah
Ankit Shah

Reputation: 137

Split html by element and class

I have a Javascript HTML string as follows,

var stringCheck = 'Test<a href="http://testdomain.com?data=new" target="_blank">partial string data</a> Test Data<span class="spanClass">XYZ</span>';

Now would like to split this string such that, in one variable I do have value as 

var split1 = 'Test<a href="http://testdomain.com?data=new" target="_blank">partial string data</a> Test Data';

and second variable would be as follows,

var split2 = '<span class="spanClass">XYZ</span>';

I would like to split the span element which has class of spanClass. Does anyone has idea how I can make it by use of RegEx or another way?

Upvotes: 0

Views: 1721

Answers (4)

Puneet
Puneet

Reputation: 325

Use something of this sort

var String = 'Test<a href="http://testdomain.com?data=new" target="_blank">partial string data</a> Test Data <span class="spanClass">XYZ</span>';
String = String.replace(/\s(?=<span class="spanClass")/ig, "|||");
var arr = String.split("|||");
console.log(arr);

**This will split on all your spans having class spanClass **

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You can create a jQuery object and extract the desired text.

var stringCheck = 'Test<a href="http://testdomain.com?data=new" target="_blank">partial string data</a> Test Data <span class="spanClass">XYZ</span>';

//Create a jQuery object
var div = $('<div>').html(stringCheck);
//Extract span
var str1 = div.children('span.spanClass').prop('outerHTML');
//Remove it
div.children('span.spanClass').remove();
//Get rest of string
var str = div.html();

console.log(str);
console.log(str1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

mplungjan
mplungjan

Reputation: 177885

Some manipulation of DOM and jQuery should do it - much to be preferred over RegEx:

var stringCheck = 'Test<a href="http://testdomain.com?data=new" target="_blank">partial string data</a> Test Data <span class="spanClass">XYZ</span>';

function splitText(html) {
  var $div = $("<div/>").html(html),
  $span = $div.find("span").remove();
  
  return [$span[0].outerHTML,$div[0].innerHTML]; // you may want to add a trim too
}
console.log(splitText(stringCheck));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337560

To achieve this you can split by the space before the <span> using a regular expression, like this:

var stringCheck = 'Test<a href="http://testdomain.com?data=new" target="_blank">partial string data</a> Test Data <span class="spanClass">XYZ</span>';

var arr = stringCheck.split(/\s(?=<span)/i);
console.log(arr);

Upvotes: 0

Related Questions