I need to split up a string like this
<p>foo</p><p>bar</p>
to an array with "foo" and "bar"
I thought RegEx could help me, but it seems I didn't understand RegEx. This is my try.
var inputText = "<p>foo</p><p>bar</p>";
splittedSelection = inputText.split("/<p>|<\/p>/g");
But all I can achieve is an array with one entry and it's the same as the inputText.
I made a little fiddle for you.
Thanks for any help.
You should use /<p>|<\/p>/g instead of inside quotations. However, this will produce ["", "foo", "", "bar", ""], which is undesirable, so you can .filter() out empty results, like this:
var inputText = "<p>foo</p><p>bar</p>";
splittedSelection = inputText.split(/<p>|<\/p>/g).filter(function(value) {
// Filter out empty results
return value !== "";
});
document.getElementById("bar").innerHTML += "0: " + splittedSelection[0] + "\n" + "1: " + splittedSelection[1] + "\n";<div id="bar">
</div>you can start from something like this:
.+ will handle different tags and attributes.+? creates a lazy quantifierconst text = "<p>foo</p><p>bar</p>";
const re = /<.+?>(.+?)<\/.+?>/g;
console.log(text.split(re).filter(t => t));
ES6 based answer:
const regex = /<[^>]*>/gi;
let string = '<p>foo</p><p>bar</p>';
let result = string.split(regex).filter(e => e);
Assuming this is on the client you can use jQuery instead of regex.
var inputText = "<p>foo</p><p>bar</p>";
var splittedSelection = $('<div>'+inputText+'</div>').find("p").map(function() {
return $(this).text()
});
$.each(splittedSelection, function(i,item) {
$("#bar").append(i+": " +item + "<br/>");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="bar"></div>Forget about the answers that try to fix your regex. Don't do it with regex.
Instead, get the elements and map their textContent to an array:
let res = Array.from(document.getElementsByTagName('p')).map(e => e.textContent);
console.log(res);<p>foo</p><p>bar</p>If you only have this string and it is not a part of the document, create an element and parse it then (you don't even need to append the element to the DOM):
let s = "<p>foo</p><p>bar</p>";
let el = document.createElement('div');
el.innerHTML = s;
let res = Array.from(el.getElementsByTagName('p')).map(e => e.textContent);
console.log(res);If you're doing this in node, you can use cheerio:
const cheerio = require('cheerio')
let html = "<p>foo</p><p>bar</p>";
const $ = cheerio.load(html);
let res = [];
$('p').each((i,e) => res.push($(e).text()));
console.log(res);
If you are doing this in any other environment, changes are extremely high that there's a DOM/XML/HTML parser available, too.
Regex shouldn't be used as parsers, but, he his asking for that... You can add a comment with a suggestion to better handle the problem but answers should be answers...Another solution with regex:
let regex = /(?![<p>])(.*?)(?=[<\/p>])/g
, inputText = "<p>foo</p><p>bar</p>";
let array = inputText.match(regex).filter(i => i);
console.log(array);
splittedSelection = inputText.split(/<p>|<\/p>/g);