javascript - 如何分别检索父元素内子元素前后的 HTML？

Question

我们正在编写一个依赖于 Javascript/jQuery 的网络应用程序。它涉及用户在一大块文本中填写单个单词，有点像 Mad Libs。我们创建了一种 HTML 格式，我们用它来编写大块文本，然后在用户填写时使用 jQuery 对其进行操作。

文本 block 的一部分可能如下所示:

<span class="fillmeout">This is a test of the <span>NOUN</span> Broadcast System.</span>

鉴于该标记，我需要分别检索和操作内部 <span> 前后的文本;我们称它们为“前缀”和“后缀”。

我知道 you can't parse HTML with simple string manipulation ，但我还是试过了；我尝试使用 split()在 <span> 上和 </span>标签。这看起来很简单。不幸的是，Internet Explorer 将所有 HTML 标签转换为大写，因此该技术失败了。我可以写一个特例，但错误教会了我如何以正确的方式做到这一点。

我知道我可以简单地使用额外的 HTML 标签来手动表示前缀和后缀，但这看起来很丑陋和多余；我希望我们的标记格式尽可能精简、可读和可写。

我查看了 jQuery 文档，但找不到完全符合我需要的函数。有各种各样的函数可以在元素前后、周围和内部添加东西，但我找不到检索已经存在的东西。我可以删除内部 <span> , 但我不知道如何区分删除元素之前的内容和之后的内容。

是否有一种“正确”的方式来做我想做的事情？

Answer 1

通过简单的字符串操作，您还可以使用 Regex。那应该可以解决您的问题。

var array = $('.fillmeout').html().split(/<\/?span>/i);