Question

我需要一种有效的方法来搜索在html页面中以任意方式出现的13位数字代码（称为ncode），例如它可能是<p>ncode</p>，也可能是<input type="hidden" value="ncode">或<span content="ncode"></span>。

我创建了一个正则表达式，找到了我需要的html片段，并在特定情况下返回

 <span itemprop="gtin13" content="0885913103914"></span>

完成后，我认为使用jQuery来查找实际的DOM元素会很容易，但我似乎找不到任何有效的东西。我尝试了$（body）.filter（“：contains（）”）和各种类似的东西。

所以问题是，在html与已知字符串匹配的DOM中找到元素的最佳方法是什么？

如果无法完成，我想我必须解析找到的不同属性的html字符串，然后使用这些属性选择元素。它似乎应该有一种直接选择元素的方法，这样我就可以在DOM中查询和操作它。

Answer 1

尝试这种简单的方法

找到代表 html-to-find

节点名称

找到代表 html-to-find

类

使用上述两个信息准备一个选择器并执行相同的操作。

<强>演示

var htmlToFind = '<span class="clas31" attribute1="4">fdgdfg</span>';

var nodeName = $( htmlToFind )[0].nodeName;
var classList = [].slice.call($( htmlToFind )[0].classList).join(".");

var isFound = $( nodeName + "." + classList ).length > 0

console.log( isFound );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span class="class1" attribute1="2">345345</span>
  <span class="class2" attribute1="2"><a>a34rrt5345</a></span>
  <span class="clas31" attribute1="4">fdgdfg</span>
  <div asd="sd">rdfgdfg</div>
</div>

您也可以通过查看 html-to-find 的其他属性来进一步优化。

如果节点名和类返回的节点数大于1，则将其进一步过滤为

var htmlToFind = '<span class="clas31" attribute1="4">fdgdfg</span>';

var nodeName = $( htmlToFind )[0].nodeName;
var classList = [].slice.call($( htmlToFind )[0].classList).join(".");

var length = $( nodeName + "." + classList ).length

console.log( "total matches by classnames and node name " + length );
var exactMatches = [];
$( nodeName + "." + classList ).each( function(){
   if ( this.outerHTML == htmlToFind )
   {
      exactMatches.push( this )
   }
});
console.log( "exactMatches" , exactMatches  )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span class="class1" attribute1="2">345345</span>
  <span class="class2" attribute1="2"><a>a34rrt5345</a></span>
  <span class="clas31" attribute1="4">fdgdfg</span>
  <span class="clas31" attribute1="4">fdg2dfg</span>
  <div asd="sd">rdfgdfg</div>
</div>

Answer 2

你可以做你想要的但是我建议不要这样做，纯粹出于性能原因。如果您获取文档正文中的每个元素并使用某些定义的逻辑解析它们（取决于您希望如何识别特定元素），那么您可以获得仅匹配元素的集合。

此示例显示在元素中的任何位置查找具有特定值的元素...

// this returns the element(s) that contain the given text
var elements = $("body span").filter(function() {
	return this.outerHTML.match("0885913103914");
}).toArray();

elements.forEach(function(el) { console.log(el.innerText); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span itemprop="gtin13" content="0885913103914">Span with correct content attribute.</span><br />
<span itemprop="gtin13" content="0885913103915">Span with incorrect content attribute.</span><br />
<span itemprop="gtin13" content="0885913103914">Span with correct content attribute.</span><br />
<span itemprop="gtin13" content="0885913103915">Span with 0885913103914 inside the contents.</span><br />

您需要调整滤镜功能以适应其他条件。基本上，如果返回true，则元素将包含在输出中。

如果您可以使用原始的正则表达式解决方案有效地执行此操作，那么我建议您使用。

在给定元素的确切html的情况下，在DOM中查找元素

2 个答案: