想要从字符串中删除HTML标签，并在结束标签上添加下一行

Question

我有HTML，我想从HTML获取文本。 但还希望下一行在html My Html中关闭标签

<ul><li>There were 1 candidates in the import file</li><li>1 candidates failed<ul><li>1 candidates were missing required fields</li></ul></li></ul>

我想要结果：-

导入文件中有1个候选

1名候选人失败1名候选人缺少必填字段

表示在第一行之后有结束标记，所以要在那下一行

或以空格替换开始标签并以点替换结束标签的任何方法。 像这样的东西：

导入文件中有1个候选人。1个候选人失败。1个候选人缺少必填字段

Answer 1

您可以使用innerText

 var items = document.querySelectorAll("ul#list > li"); [].forEach.call(items, (item) => console.log(item.innerText)); 

 <ul id="list"> <li>There were 1 candidates in the import file</li> <li>1 candidates failed <ul> <li>1 candidates were missing required fields</li> </ul> </li> </ul> 

Answer 2

您可以获取每个列表项，然后使用.each方法将其文本值添加到结果变量res ：

 let result = ""; $('ul li').each((_, elem) => { result += $(elem).text().replace(/\\s{2,}/g, '') + '\\n'; }) console.log(result); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>There were 1 candidates in the import file</li> <li>1 candidates failed <ul> <li>1 candidates were missing required fields</li> </ul> </li> </ul> 

在这里，我还使用了一些正则表达式来删除从.text()检索到的所有空格。

Answer 3

尽管在较大的文档中具有级联的实际用例中可能会进行一些调整，但以下内容可以在不删除标签的情况下完成所需的布局。

使用CSS，将第二个li设置为display: inline-flex并从嵌入式ul删除项目符号（以及主观地删除一些填充以使内容正确对齐）。

 li:nth-child(2) { display: inline-flex; } ul { list-style: none; } ul ul { padding-left: 0.5em; } 

 <ul> <li>There were 1 candidates in the import file</li> <li>1 candidates failed <ul> <li>1 candidates were missing required fields</li> </ul> </li> </ul>