jquery - 如何使用 jQuery 拆分或迭代交错的纯文本和 HTML 内联标记？

Question

我正在处理一些第三方 HTML，它是半结构化标记文本(粗体、斜体等)。

这是结构的简化示例:

<div>
  <strong class="term">one</strong>
  -
  <b class="defs">
    foo        
    <i class="pos">verb</i>
    bar
    <i class="pos">noun</i>
    baz
    <i class="pos">adjective</i>
    blah
  </b>
  <br>
  <strong class="term">two</strong>
  ... etc ...
</div>

事实上，我已经对其进行了一些处理以使其成为这种形状。我可以很好地处理 HTML 元素，但我无法弄清楚如何处理交错文本和 <i>元素。

我对解决方案感到满意，该解决方案可以将 <i> 周围的“defs”分开由于浏览器特定的怪癖，我不想混合使用 jQuery 和“原始”DOM API 调用，但我理解如果我无法避免它。从我浅薄的知识来看，jQuery 对标记文本的支持不如对“结构” HTML 的支持好......

我是否遗漏了一些明显的东西？这似乎很难搜索...

<小时/>

事实证明，在现实世界的数据中，文本运行和 <i>节点总是交错的，但 defs 中的第一件事可以是其中之一，并且每个文本串可以由一个或多个实际文本节点组成。这意味着<i> s 和文本运行不匹配。

好的解决方案可能是向每个文本运行添加标记，或者迭代，为每个 <i> 做一件事。每个文本运行还有另一件事。我在想jQuery.contents()一些节点类型检查必须是关键......

Answer 1

您可以执行以下操作将所有文本检索到数组中

$(function(){
  var json = $('.defs').contents().map(function(){
     var text = $.trim($(this).text()); 
     return  text != "" ? text : null;
  });

  console.log(json);
});​

演示: http://jsfiddle.net/joycse06/Z5AgL/

上面的代码给你一个所有defs的列表以及文本节点和 i .

更新

是的，您可以使用 this.nodeName 进行节点类型或名称检查或this.nodeType在 map 函数里面。 nodeType对于 textnode是 3 。例如将其添加到 .map() 内并检查

console.log(this.nodeName,this.nodeType);

因此，对于这个特定的标记结构，您可以执行以下操作来检查它是否是 <i>或textnode

if(this.nodeName.toLowerCase() == 'i'){
    console.log('<i>');
    // do stuff for <i> here
}    
else{
    console.log('Text Node');            
    // it's text node
}  

// or with nodeType

if(this.nodeType == 3){
 // textNode
}else{
 // <i> 
}  

演示:http://jsfiddle.net/joycse06/Z5AgL/6/