如何使用 javascript 从文本框中提取所有 HTML 标签的数组

Question

我想从这个<body id = "myid">.... </body> <body id ="myid">属性并使用 javascript。

我试过使用正则表达式来制作包含在“<&>”之间的所有标签的数组

<script>

$(document).ready(function(){
    // Get value on button click and show alert
    $("#btn_parse").click(function(){
        var str = $("#data").val();
        var arr =  str.split(/[<>]/);
        $('#result').text(arr);
    });
});
</script>

但它正在创建一个包含空和垃圾的数组 arr，它还删除了我不想要的 angular 括号“<>”。 所以简而言之，我想要一个脚本

str ='mystring ... <htmltag id='myid' class='myclass'>i_don't_want_anythin_from_here</htmltag> ...';

并生成如下数组：

arr = ["<htmltag id='myid' class='myclass'>","</htmltag>",...];

Answer 1

假设您还可以从“实时”页面获取输入，那么以下内容应该可以满足您的要求：

[...document.querySelectorAll("*")]
  .map(el=>el.outerHTML.match(/[^>]+>/)[0]+"</"+el.tagName.toLowerCase()+">")

上面将把开始和结束标签组合成一个字符串，比如

<div class="js-ac-results overflow-y-auto hmx3 d-none"></div>

这是应用于任意字符串的相同代码：

 var mystring="<div class='all'><htmltag id='myid' class='myclass'>i_don't_want_anythin_from_here</htmltag><p>another paragraph</p></div>"; const div=document.createElement("div"); div.innerHTML=mystring; let res=[...div.querySelectorAll("*")].map(el=>el.outerHTML.match(/[^>]+>/)[0]+"</"+el.tagName.toLowerCase()+">") console.log(res)

Answer 2

这是一种肮脏的方式。 将它添加到 dom 以便可以通过正常的 DOM 函数访问它，然后删除文本，拆分标签并推送到数组。

 str ="mystring... <htmltag id='myid' class='myclass'>i_don't_want_anythin_from_here</htmltag>..."; div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); tags = div.querySelectorAll("*"); stripped = []; tags.forEach(function(tag){ tag.innerHTML = ""; _tag = tag.outerHTML.replace("></",">~</"); stripped.push(_tag.split("~")); }); console.log(stripped); document.body.removeChild(div);

如何使用 javascript 从文本框中提取所有 HTML 标签的数组

问题描述

2 个解决方案

解决方案1
0 2020-09-24 15:57:02

解决方案2
0 已采纳 2020-09-24 16:06:25

如何使用 javascript 从文本框中提取所有 HTML 标签的数组

问题描述

2 个解决方案

解决方案1 0 2020-09-24 15:57:02

解决方案2 0 已采纳 2020-09-24 16:06:25

解决方案1
0 2020-09-24 15:57:02

解决方案2
0 已采纳 2020-09-24 16:06:25