1

我正在 jquery 中创建一个书签，它应该能够在页面上找到价格并拉出每个价格被替换的字体大小。我最大的困难是找到一种方法来使用 :contains 正则表达式。看来 :contains 只能与精确文本一起使用。这就是我开始的。本质上，我想按价格定价并获得字体大小。

jQuery(":contains('" + jQuery('body').text().match(/[$€£]\d{1,3}(,?\d{3})?(\.\d{2})?/g)+ "')").each( function() { 
var size = parseInt( jQuery(this).css( 'fontSize' ), 10 ); 
results.push({ size: size, price: price}); 
});
4

2 回答 2

1

我怀疑您可以通过先搜索货币符号$.grep()或$.filter()使用正则表达式来获得结果。让我把一个 jsFiddle 放在一起进行演示（我不是每个书签，所以我不确定如何从一个书签中引用 jQuery）。

编辑 2

以下尝试获取最内部的元素$.text()并忽略父元素。同样，我怀疑该方法不能完美地处理诸如具有多个内部元素的段落标签之类的东西，两者都有价格字符串。但它比下面的更进一步。

你会在小提琴中看到一些更冗长的东西，但以下是使它工作的部分。

function containsSelector(value) {
  return ':contains(' + value + ')';
}

function groupContainsSelector(list) {
  return $.map(list, containsSelector).join(',');
}

function groupExpression(list) {
  var expression = '[' + list.join('') + ']\\d{1,3}(,?\\d{3})?(\\.\\d{2})?';

  if (!expressions.hasOwnProperty(expression)) {
    expressions[expression] = new RegExp(expression, 'g');
  }

  return expressions[expression];
}

请注意，我缓存了RegExp，所以我没有要求我已经创建了一个新的。

function hasCurrency($el, currency, test) {
  if ($el.children(currency).size()) {
    return false;
  }

  return !!$el.text().match(test);
}

使用这些函数，我们可以根据情况使用以下其中一种：

$contains = $(currencieselector, document.body);

$filter = $contains.filter(function (i, el) {
  return hasCurrency($(el), currencieselector, groupexp);
});

$grep = $.grep($contains, function (el, i) {
  return hasCurrency($(el), currencieselector, groupexp);
});

$map = $contains.map(function () {
  return !hasCurrency($(this), currencieselector, groupexp) || this;
});

http://jsfiddle.net/userdude/CvYpx/9/

我使用 asetTimeout将应用到每个方法中找到的元素的每一层样式。除了 之外$contains，其他三个是相同的结果。我还强调了每个教派：

$.each(currencies, function (index, val) {
  $contains.filter(function (i, el) {
    return hasCurrency($(el), containsSelector(val), groupExpression([val]));
  })
  .addClass(denominations[index]);
});

编辑

这或多或少是我得到的，有一些人为的例子：

<p>Franc: £58,00</p>
<aside>No price</aside>
<p>Dollar: $8.08</p>
<p>Euro: €5.34</p>
<p>No price</p>
<p>SPAN price: <span>€3,00</span></p>
<p>STRONG: <strong>£73.93</strong></p>
<p>EM: <em>$73.93</em></p>

var $contains = $(':contains($),:contains(€),:contains(£)', document.body),
    regex = /[$€£]\d{1,3}(,?\d{3})?(\.\d{2})?/g,
    $filter,
    $grep;

$grep = $.grep($contains, function(n, i){
    console.log($(n).text().match(regex), $(n).text());
    return !!$(n).text().match(regex);
});

$filter = $contains.filter(function(n, i){
    console.log($(i).text().match(regex));
    return !!$(i).text().match(regex);
});

console.log($contains);
console.log($filter);
console.log($grep);

http://jsfiddle.net/userdude/CvYpx/

请注意，在结果中同时找到 aparent和 a存在问题child，我不确定您是否要这样做。另外，我不擅长的正则表达式，所以没有评论。所以它并不完美，但它是$.grep()and的一般想法$.filter()。

于 2013-01-12T04:11:59.960 回答
0

您可能需要考虑一种不同的方法：获取页面上的所有文本节点，并且对于与您的正则表达式匹配的每个节点，获取父节点的计算样式的字体大小。这可能看起来效率低下，但实际上并非如此：jQuery 已经必须执行类似的操作来评估您的contains查询。

于 2013-01-12T04:02:59.450 回答