javascript - innerText で要素を取得する方法

Question

テキストタグに含まれるものがわかっている場合、htmlページでタグを取得する方法。例えば：

<a ...>SearchingText</a>

Answer 1

これを達成するために xpath を使用できます

var xpath = "//a[text()='SearchingText']";
var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

次の xpath を使用して、テキストを含む要素を検索することもできます。

var xpath = "//a[contains(text(),'Searching')]";

Answer 2

手でトラバースする必要があります。

var aTags = document.getElementsByTagName("a");
var searchText = "SearchingText";
var found;

for (var i = 0; i < aTags.length; i++) {
  if (aTags[i].textContent == searchText) {
    found = aTags[i];
    break;
  }
}

// Use `found`.

Answer 3

jQuery :contains() セレクターを使用できます

var element = $( "a:contains('SearchingText')" );

Answer 4

function findByTextContent(needle, haystack, precise) {
  // needle: String, the string to be found within the elements.
  // haystack: String, a selector to be passed to document.querySelectorAll(),
  //           NodeList, Array - to be iterated over within the function:
  // precise: Boolean, true - searches for that precise string, surrounded by
  //                          word-breaks,
  //                   false - searches for the string occurring anywhere
  var elems;

  // no haystack we quit here, to avoid having to search
  // the entire document:
  if (!haystack) {
    return false;
  }
  // if haystack is a string, we pass it to document.querySelectorAll(),
  // and turn the results into an Array:
  else if ('string' == typeof haystack) {
    elems = [].slice.call(document.querySelectorAll(haystack), 0);
  }
  // if haystack has a length property, we convert it to an Array
  // (if it's already an array, this is pointless, but not harmful):
  else if (haystack.length) {
    elems = [].slice.call(haystack, 0);
  }

  // work out whether we're looking at innerText (IE), or textContent 
  // (in most other browsers)
  var textProp = 'textContent' in document ? 'textContent' : 'innerText',
    // creating a regex depending on whether we want a precise match, or not:
    reg = precise === true ? new RegExp('\\b' + needle + '\\b') : new RegExp(needle),
    // iterating over the elems array:
    found = elems.filter(function(el) {
      // returning the elements in which the text is, or includes,
      // the needle to be found:
      return reg.test(el[textProp]);
    });
  return found.length ? found : false;;
}


findByTextContent('link', document.querySelectorAll('li'), false).forEach(function(elem) {
  elem.style.fontSize = '2em';
});

findByTextContent('link3', 'a').forEach(function(elem) {
  elem.style.color = '#f90';
});

<ul>
  <li><a href="#">link1</a>
  </li>
  <li><a href="#">link2</a>
  </li>
  <li><a href="#">link3</a>
  </li>
  <li><a href="#">link4</a>
  </li>
  <li><a href="#">link5</a>
  </li>
</ul>

もちろん、もう少し簡単な方法は次のとおりです。

var textProp = 'textContent' in document ? 'textContent' : 'innerText';

// directly converting the found 'a' elements into an Array,
// then iterating over that array with Array.prototype.forEach():
[].slice.call(document.querySelectorAll('a'), 0).forEach(function(aEl) {
  // if the text of the aEl Node contains the text 'link1':
  if (aEl[textProp].indexOf('link1') > -1) {
    // we update its style:
    aEl.style.fontSize = '2em';
    aEl.style.color = '#f90';
  }
});

<ul>
  <li><a href="#">link1</a>
  </li>
  <li><a href="#">link2</a>
  </li>
  <li><a href="#">link3</a>
  </li>
  <li><a href="#">link4</a>
  </li>
  <li><a href="#">link5</a>
  </li>
</ul>

参考文献:

• Array.prototype.filter().
• Array.prototype.forEach().
• Array.prototype.slice().
• 条件付き (「三項」, assessment ? ifTrue : ifFalse) 演算子.
• Function.prototype.call().
• typeofオペレーター。

Answer 5

内部テキストを理解することは可能ですが、あなたは間違った方向に向かっていると思います. その内部文字列は動的に生成されますか? その場合は、タグにクラスまたは -- できれば -- テキストがそこに入るときに ID を与えることができます。静的であれば、さらに簡単です。

Answer 6

私たちがあなたを助けるために、あなたはもう少し具体的にする必要があると思います.

1. どうやってこれを見つけていますか？ジャバスクリプト？PHP? パール？
2. タグに ID 属性を適用できますか?

テキストが一意である場合 (実際にはそうでない場合でも、配列を実行する必要があります)、正規表現を実行してそれを見つけることができます。そのためには、PHP の preg_match() を使用するとうまくいきます。

Javascript を使用していて、ID 属性を挿入できる場合は、getElementById('id') を使用できます。その後、DOM ( https://developer.mozilla.org/en/DOM/element.1 ) を介して、返された要素の属性にアクセスできます。