使用 jQuery 到 select 个具有 html 个实体的 div

Question

我需要 select 包含 <sup> 的所有 divs。

我已经试过了

var size = $("div:contains('&lt;sup&gt;')").length;

使用上面的代码，我得到的长度为 0。

样本HTML

<div>I have a &lt;sup&gt;superscript&lt;/sup&gt;!</div>

Answer 1

:contains() 已经为您转义了实体。

var size = $("div:contains('<sup>')").length;
console.log(size);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I have a &lt;sup&gt;superscript&lt;/sup&gt;!</div>

Answer 2

Filter 所有包含字符 & 和 ;

的 div

var divs = $("div").filter(function(idx) {
   return this.innerHTML.indexOf("&") > -1 && this.innerHTML.indexOf(";") > -1;
});

Answer 3

虽然你已经接受了一个答案，但我想我会花点时间向你展示一个稍微更 easily-customisable 的方法，它允许你找到 – 并检索 – 所有 child包含在元素文本中的元素（正如您的标题所暗示的：“使用 [jQuery] 到 select [<div> 元素] 具有 html entities")，或者它允许您在这些元素中过滤特定类型的元素（因为您问题的第一行暗示您想要：“我需要 select 包含 ^.").

的所有 [<div> 个元素]

也就是说，以下涵盖了使用普通 JavaScript 的两种情况：

// str:       String, the textContent of a given node.
// filterFor: String, the tag-name of an element-type
//            for which you wish to search (eg: 'div',
//            'sup' etc).
function hasEntities(str, filterFor) {

  // a temporary element to contain the supplied string
  // of text:
  var temp = document.createElement('div'),

  // a variable to hold the child elements of the
  // temp element (to be used later):
    parsed;

  // assigning the text as the innerHTML of the
  // created element:
  temp.innerHTML = str;

  // finding all elements contained within the created-
  // element, using the CSS universal selector ('*');
  // and converting that collection into an Array, using
  // Array.from:
  parsed = Array.from( temp.querySelectorAll('*') );

  // if a filterFor argument was supplied:
  if (filterFor) {

    // we first remove all '<', '/' and '>' characters from
    // the supplied string, replacing them with an empty-
    // String, and then convert it to lower-case:
    filterFor = filterFor.replace(/(<|\/|>)+/g, '').toLowerCase();

    // here we filter the array of nodes using
    // Array.prototype.filter() to discard all elements
    // for which the assessment does not return true
    // or truthy; and then return that filtered
    // array to the calling context:
    return parsed.filter(function(n) {

      // if the current element of the Array of element
      // nodes found within the created-element, in
      // lower-case, is equal to the element-type we're
      // looking for then we retain that node, otherwise
      // it's discarded:
      return n.tagName.toLowerCase() === filterFor;
    });
  }

  // if no filterFor argument was supplied then we simply
  // return the array of descendant elements:
  return parsed;
}

var el = document.querySelector('div'),
  parentOfSup = hasEntities(el.textContent, 'sup').length > 0;

console.log(parentOfSup); // returns the <sup> node
console.log(parentOfSup.length); // 1
console.log(parentOfSup.length > 0); // true

function hasEntities(str, filterFor) {
  var temp = document.createElement('div'),
    parsed;

  temp.innerHTML = str;

  parsed = Array.from(temp.getElementsByTagName('*'));

  if (filterFor) {
    filterFor = filterFor.replace(/(<|\/|>)+/g, '').toLowerCase();

    return parsed.filter(function(n) {
      return n.tagName.toLowerCase() === filterFor;
    });
  }

  return parsed;
}

var el = document.querySelector('div'),
  parentOfSup = hasEntities(el.textContent, 'sup').length > 0;

console.log(parentOfSup);

<div>I have a &lt;sup&gt;superscript&lt;/sup&gt;&lt;div&gt;and a child div&lt;/div&gt;!</div>

使用 jQuery 到 select 个具有 html 个实体的 div

Use jQuery to select divs that have html entities

html

jquery

contains

html-entities

样本HTML