CODEWITHSUNDEEP
javascriptregexsplit
Yashia
Yashia

Reputation: 90

RegEx in JavaScript .split()

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.

Upvotes: 5

Views: 10814

Answers (6)

BrTkCa
BrTkCa

Reputation: 4783

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);

Upvotes: 0

baao
baao

Reputation: 73231

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.

Upvotes: 0

mplungjan
mplungjan

Reputation: 177851

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>

Upvotes: 0

oboshto
oboshto

Reputation: 3627

ES6 based answer:

const regex = /<[^>]*>/gi;
let string = '<p>foo</p><p>bar</p>';
let result = string.split(regex).filter(e => e);

Upvotes: 0

Angelos Chalaris
Angelos Chalaris

Reputation: 6747

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>

Upvotes: 2

Hitmands
Hitmands

Reputation: 14179

you can start from something like this:

  1. .+ will handle different tags and attributes
  2. .+? creates a lazy quantifier

const text = "<p>foo</p><p>bar</p>";

const re = /<.+?>(.+?)<\/.+?>/g;

console.log(text.split(re).filter(t => t));

Upvotes: 1

Related Questions