How to extract content of html tags from a string using javascript or angularjs?

Question

I have a string containing content in some html tags and also some text alone.

It looks like this :

var str =  "<p></p><p><i>blabla</i></p><p><i><b>blaaaaaablaaaaa</b></i></p><iframe src="..." height="111" width="333"></iframe><p></p><p><sub>hello blabla</sub></p><p><br></p><iframe src="..." height="444" width="888"></iframe>"

I would like to extract somehow in Javascript or AngularJS only some tag (including content and attributes) then put them into an array.

For example, if I want only <iframe> tag, I should have this :

var array = ["<iframe src='...' height='111' width='333'></iframe>", "<iframe src='...' height='444' width='888'></iframe>"];

If I want <p> tag then :

var array = ["", "<i>blabla</i>","<i><b>blaaaaaablaaaaa</b></i>","","<sub>hello blabla</sub>","<br>"];

Any suggestion ? Thanks !

NOTE : Don't give an answer using Jquery please !

I believe this would fall under HTML parsing. So I would search SO for that. It's kind of a pain in the arse. Otherwise see if someone has good implementation in Regex. — Callum Linington
– Callum Linington, Commented Jun 8, 2016 at 11:57
stackoverflow.com/questions/9189338/… Check this out.. here is your answer. — Tirthraj Barot
– Tirthraj Barot, Commented Jun 8, 2016 at 11:58
Does extract mean also remove from string? Do you need strings of iframes or can they be dom elements also? what are you doing with the results? — charlietfl
– charlietfl, Commented Jun 8, 2016 at 12:12
@charlietfl I need strings of iframes yes, like this : "<iframe src='...' width='...' height='....' ></iframe>" — Emidomenge
– Emidomenge, Commented Jun 8, 2016 at 12:17

Naeem Shaikh · Accepted Answer · 2016-06-08 12:38:23Z

3

You could create an angular element and get the text out of it.

Example:

$scope.array =[];
$scope.eles=
angular.element(str).find('iframe');
[].forEach.call($scope.eles, function (ctl) {
    $scope.name.push(angular.element(ctl).text())
});

here is a demo: http://jsfiddle.net/Lvc0u55v/5122/

Edit To get all the html of the tag you can do:

angular.element(str).find('iframe');
    [].forEach.call($scope.eles, function (ctl) {
        $scope.name.push(ctl.outerHTML)
    });

demo: http://jsfiddle.net/Lvc0u55v/5123/

edited Jun 8, 2016 at 12:38

answered Jun 8, 2016 at 12:08

Naeem Shaikh

15.8k8 gold badges53 silver badges92 bronze badges

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

6 Comments

charlietfl Over a year ago

On the right track but text() won't provide outerHTML of the iframe elements

Emidomenge Over a year ago

This is answering 50% of my question. I need also to have the html tag with his attributes :

["<iframe src='.....' height='...' width='...'>...</iframe>", ....., "<iframe src='.....' height='...' width='...'>...</iframe>"]

Naeem Shaikh Over a year ago

@Emidomh.. instead of angular.element(ctl).text() you can also do $scope.name.push(ctl.outerHTML) to get all outer html

Emidomenge Over a year ago

@NaeemShaikh Almost there but your solution is good ! Take a look to this fiddle Can you tell me why it gives me an empty array ?

Naeem Shaikh Over a year ago

@Emidomh look at at this jsfiddle.net/8cgebbf9/2 . you need a wrapper coz angular element needs to be one to be created.

|

Kram · Accepted Answer · 2016-06-08 12:04:54Z

1

try this code:

var iFrameArr= str.match("<iframe>(.*)<iframe>");
var iFrameContent = iFrameArr[1];

answered Jun 8, 2016 at 12:04

Kram

5265 silver badges12 bronze badges

Comments

Dan_ · Accepted Answer · 2016-06-08 12:05:43Z

0

You will want to look at splitting up the string with regex using a filter such as '(<iframe>).*(<\/iframe>)'. This will find the tags of and as well as everything in between, putting it into a capture group per iteration found.

answered Jun 8, 2016 at 12:05

Dan_

1,24511 silver badges21 bronze badges

Comments

Nishad K Ahamed · Accepted Answer · 2016-06-08 12:26:03Z

0

Set the html content to the DOM and extract the iframe tag using jquery

Assuming you have a div with id='test' in your DOM

var str = "<div> .... </div> <iframe src=".....">..</iframe> 
  text blabla 
  <iframe src="....."> ....blabla2.... </iframe> 
  ....
  <p>.....</p> 
  ......";
$('#test').html(str);

var ar=[]
$('#test iframe').each(function() {
    var x = $(this).wrap('<p/>').parent().html();//wrap the iframe with element p and get the html of the parent
    ar.push(x)//add the html content to array
});

//now ar contains the expected output

answered Jun 8, 2016 at 12:26

Nishad K Ahamed

1,39415 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to extract content of html tags from a string using javascript or angularjs?

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related