如何在JavaScript中的两个自定义html标签之间获取文本？

Question

我想知道如何在两个自定义html标签之间获取文本。 例：

 const a = "Hello, <num>22</num>"; //And here i want to get only 22 (between these two tags <num></num> //I've tried something like this: const nr = a.match(/<num>(.*?)<\\/num>/g); console.log(nr); //But as you can see, it will only output <num>22</num> 

Answer 1

虽然您可以使用innerHTML等内容访问内容，但是通过正则表达式从输入字符串中回答您的问题，您可以使用exec（）函数。 这将返回一个数组，其中第一个元素是整个匹配的字符串<num>22</num> ，后续元素将对应于捕获的组。 所以nr[1]将产生22 。

 const a = "Hello, <num>22</num>"; const nr = /<num>(.*?)<\\/num>/g.exec(a); console.log(nr[1]); 

请注意， exec()是RegExp的函数，而不是像match()那样的String。

Answer 2

通常不建议使用正则表达式解析（x）html 。

这里只是一个可以在Chrome中运行的快速代码段，看起来您可以针对自定义标记运行查询，还可以使用textContent属性来获取内部文本：

 const customContent = document.querySelector('custom').textContent console.log(`custom tag's content: ${ customContent }`) const numContent = document.querySelector('num').textContent console.log(`num tag's content: ${ numContent }`) 

 <custom>inner text</custom> <num>some more inner text</num> 

Answer 3

除了提供的答案之外，您还可以将字符串添加到新元素并正常搜索它，例如

 const a = "Hello, <num>22</num>"; var wrapper = document.createElement("div"); wrapper.innerHTML = a; var element = wrapper.getElementsByTagName("num")[0]; console.log(element.innerHTML); 

这允许您匹配而不实际将文本插入DOM，并允许您避免在解析html时不安全的正则表达式。