如何使用javascript或angularjs从字符串中提取html标记的内容？

问题描述：

我有一个字符串包含一些html标签中的内容，也有一些文本。如何使用javascript或angularjs从字符串中提取html标记的内容？

它看起来像这样：

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>"

我想在Javascript或AngularJS不知何故只提取了一些标签（包括内容和属性），然后把它们放进一个数组。

例如，如果我只想要标签，我应该有这样的：

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

如果我想<p>标签则：

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

什么建议吗？谢谢！

NOTE：请不要回答请使用jquery拜托！

我相信这将属于HTML解析。所以我会为此搜索。这是屁股疼痛。否则，看看是否有人在Regex中有很好的实现。 –

http://*.com/questions/9189338/how-to-extract-content-of-html-tags-from-a-string-using-javascript-or-jquery检查了这一点..这里是你的答案。 –

提取意味着也从字符串中删除？你需要一串iframe吗？或者他们可以成为dom元素吗？你对结果做什么？ – charlietfl

答

您可以创建一个角度元素并从中获取文本。

例子：

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

这里是一个演示：http://jsfiddle.net/Lvc0u55v/5122/

编辑要获取标签的所有HTML，你可以这样做：

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

演示：http://jsfiddle.net/Lvc0u55v/5123/

在正确的轨道上，但文本（）不会提供iframe元素的outerHTML – charlietfl

这是回答我的问题** 50％**我还需要具有他的属性的HTML标记：'[“ ...”，.....，“<iframe src="..%20..." height="..." width="..."> ...“]' – <span class="text-secondary"> <small> <a rel="noopener">Emidomh</a></small></span> <span></span>

@Emidomh ..而不是'angular.element（ctl）.text（）'你也可以' $ scope.name.push（ctl.outerHTML）'得到所有外部html –

答

试试这个代码：

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

答

你会想看看分裂使用过滤器，例如'(<iframe>).*(<\/iframe>)'用正则表达式的字符串。这将找到两者之间的标签以及其中的所有内容，并将其放入每次迭代发现的捕获组中。

答

设置html co ntent到DOM和使用jquery

假设你提取iframe tag有id='test'一个div在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

如何使用javascript或angularjs从字符串中提取html标记的内容？

相关推荐