[javascript] innerText로 요소를 얻는 방법

어떤 텍스트 태그가 포함되어 있는지 알고 있다면 HTML 페이지에서 태그를 얻는 방법. 예 :

<a ...>SearchingText</a>

답변

당신은 손으로 통과해야합니다.

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`.

답변

이것을 달성하기 위해 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')]";

답변

현재 가장 현대적인 구문을 사용하면 다음과 같이 매우 깔끔하게 수행 할 수 있습니다.

for (const a of document.querySelectorAll("a")) {
  if (a.textContent.includes("your search term")) {
    console.log(a.textContent)
  }
}

또는 별도의 필터로 :

[...document.querySelectorAll("a")]
   .filter(a => a.textContent.includes("your search term"))
   .forEach(a => console.log(a.textContent))

당연히 레거시 브라우저는이를 처리하지 않지만 레거시 지원이 필요한 경우 트랜스 파일러를 사용할 수 있습니다.

답변

jQuery : contains () Selector를 사용할 수 있습니다

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

답변

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>

스 니펫 확장

참고 문헌 :

답변

기능적 접근. 일치하는 모든 요소의 배열을 반환하고 확인하는 동안 주위 공간을 잘라냅니다.

function getElementsByText(str, tag = 'a') {
  return Array.prototype.slice.call(document.getElementsByTagName(tag)).filter(el => el.textContent.trim() === str.trim());
}

용법

getElementsByText('Text here'); // second parameter is optional tag (default "a")

다른 태그 (예 : 스팬 또는 버튼)를 통해 보는 경우

getElementsByText('Text here', 'span');
getElementsByText('Text here', 'button');

기본 값 태그 = ‘a’는 이전 브라우저의 경우 Babel이 필요합니다.

답변

하위 문자열 을 다음 줄에 전달하면 됩니다.

외부 HTML

document.documentElement.outerHTML.includes('substring')

내부 HTML

document.documentElement.innerHTML.includes('substring')

이를 사용 하여 전체 문서 를 검색하고 검색어가 포함 된 태그를 검색 할 수 있습니다.

function get_elements_by_inner(word) {
    res = []
    elems = [...document.getElementsByTagName('a')];
    elems.forEach((elem) => {
        if(elem.outerHTML.includes(word)) {
            res.push(elem)
        }
    })
    return(res)
}

사용법 :

이 페이지에서 “T3rm1″사용자는 몇 번이나 언급 되었습니까?

get_elements_by_inner("T3rm1").length

jQuery는 몇 번이나 언급됩니까?

get_elements_by_inner("jQuery").length

삼

“Cybernetic”이라는 단어가 포함 된 모든 요소를 가져옵니다.

get_elements_by_inner("Cybernetic")