복붙노트

[JQUERY] innerText와에 의해 요소를 얻는 방법

JQUERY

innerText와에 의해 요소를 얻는 방법

해결법

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

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

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

  2. 2.이 작업을 수행하기 위해 XPath를 사용할 수 있습니다

    이 작업을 수행하기 위해 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')]";

  3. 3.순간에 사용할 수있는 가장 현대적인 구문을 사용하여,이 같은 아주 깨끗하게 수행 할 수 있습니다 :

    순간에 사용할 수있는 가장 현대적인 구문을 사용하여,이 같은 아주 깨끗하게 수행 할 수 있습니다 :

    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))

    물론, 기존 브라우저는이 문제를 처리하지 않습니다,하지만 레거시 지원이 필요한 경우 당신은 transpiler를 사용할 수 있습니다.

  4. 4.() 선택기를 포함 : 당신은 jQuery를 사용할 수

    () 선택기를 포함 : 당신은 jQuery를 사용할 수

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

  5. 5.기능적 접근 방식. 모든 요소와 일치 확인하면서 주위 트림 공간 반환 어레이.

    기능적 접근 방식. 모든 요소와 일치 확인하면서 주위 트림 공간 반환 어레이.

    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'오래된 브라우저 바벨이 필요합니다

  6. 6.함수 findByTextContent (바늘, 건초, 정확한) { // 바늘 : 문자열, 문자열이 요소에서 찾을 수합니다. // 건초 더미 : 문자열, 선택기가) (document.querySelectorAll에 전달되는 // NodeList를, 배열은 - 함수 내 이상 반복한다 : // 정확한 : 부울 사실 - 검색은 그 정확한 문자열에 둘러싸여 // 단어 구분, // 거짓 - 문자열 발생 어디를 검색 var에 elems; // 우리가 여기 종료 더 건초 더미는 검색하지 않도록 없습니다 // 전체 문서 : 만약 (! 건초 더미) { false를 반환; } 건초 더미가 문자열 인 경우 //, 우리가) (document.querySelectorAll에 전달, // 및 배열에 결과를 설정 : 다른 경우 ( '문자열'== 대해서 typeof 건초 더미) { elems = [] .slice.call (document.querySelectorAll (덤), 0); } 건초 더미의 길이 속성이있는 경우 //, 우리는이 배열로 변환 // (이 배열이 이미 있다면,이 무의미하지만 유해하지 않음) : 다른 경우 (haystack.length) { elems = [] .slice.call (건초, 0); } 우리는 innerText와 (IE) 또는는 TextContent에서 찾고 있는지 알아 // 작업 // (대부분의 다른 브라우저에서) VAR textProp = '는 TextContent'문서? '는 TextContent': 'innerText와' // 우리는 정확한 일치를 원 여부에 따라 정규식을 만드는 : 사실 === 등록 번호 = 정확한? 새로운 정규식 ( '\\ B'+ 바늘 + "\\ B ') : 새로운 정규식 (바늘) // elems 배열 반복 : 발견 elems.filter = (함수 (EL) { // 텍스트, 또는 포함 된 구성 요소를 반환 // 바늘을 찾을 수 : 반환 reg.test (EL [textProp]); }); found.length을 반환? 발견 : 거짓; } findByTextContent ( '링크'document.querySelectorAll ( '리'), 거짓) .forEach (함수 (ELEM) { elem.style.fontSize = '2EM'; }); findByTextContent ( 'LINK3', 'A'). 대해 forEach (함수 (ELEM) { elem.style.color = '#의 F90'; });

    함수 findByTextContent (바늘, 건초, 정확한) { // 바늘 : 문자열, 문자열이 요소에서 찾을 수합니다. // 건초 더미 : 문자열, 선택기가) (document.querySelectorAll에 전달되는 // NodeList를, 배열은 - 함수 내 이상 반복한다 : // 정확한 : 부울 사실 - 검색은 그 정확한 문자열에 둘러싸여 // 단어 구분, // 거짓 - 문자열 발생 어디를 검색 var에 elems; // 우리가 여기 종료 더 건초 더미는 검색하지 않도록 없습니다 // 전체 문서 : 만약 (! 건초 더미) { false를 반환; } 건초 더미가 문자열 인 경우 //, 우리가) (document.querySelectorAll에 전달, // 및 배열에 결과를 설정 : 다른 경우 ( '문자열'== 대해서 typeof 건초 더미) { elems = [] .slice.call (document.querySelectorAll (덤), 0); } 건초 더미의 길이 속성이있는 경우 //, 우리는이 배열로 변환 // (이 배열이 이미 있다면,이 무의미하지만 유해하지 않음) : 다른 경우 (haystack.length) { elems = [] .slice.call (건초, 0); } 우리는 innerText와 (IE) 또는는 TextContent에서 찾고 있는지 알아 // 작업 // (대부분의 다른 브라우저에서) VAR textProp = '는 TextContent'문서? '는 TextContent': 'innerText와' // 우리는 정확한 일치를 원 여부에 따라 정규식을 만드는 : 사실 === 등록 번호 = 정확한? 새로운 정규식 ( '\\ B'+ 바늘 + "\\ B ') : 새로운 정규식 (바늘) // elems 배열 반복 : 발견 elems.filter = (함수 (EL) { // 텍스트, 또는 포함 된 구성 요소를 반환 // 바늘을 찾을 수 : 반환 reg.test (EL [textProp]); }); found.length을 반환? 발견 : 거짓; } findByTextContent ( '링크'document.querySelectorAll ( '리'), 거짓) .forEach (함수 (ELEM) { elem.style.fontSize = '2EM'; }); findByTextContent ( 'LINK3', 'A'). 대해 forEach (함수 (ELEM) { elem.style.color = '#의 F90'; });

    • 를보기
    • 를보기
    • 를보기
    • 를보기 link4
    • 를보기 link5

      물론, 다소 간단한 방법은 아직 :

      VAR textProp = '는 TextContent'문서? '는 TextContent': 'innerText와'; // 직접 발견 된 배열에 'A'변환 소자 // 후) Array.prototype.forEach (와 그 어레이를 통해 반복 : [] .slice.call (document.querySelectorAll ( "A"), 0) .forEach (함수 (AEL) { // AEL 노드의 텍스트가 텍스트 '링크 1'이 포함 된 경우 : (AEL [textProp] .indexOf ( '링크 1')> -1) {만약 // 우리는 그것의 스타일을 업데이트 : aEl.style.fontSize = '2EM'; aEl.style.color = '#의 F90'; } });

      • 를보기
      • 를보기
      • 를보기
      • 를보기 link4
      • 를보기 link5

        참고 :

      • 7.단순히 다음 줄에 당신의 문자열을 전달합니다

        단순히 다음 줄에 당신의 문자열을 전달합니다

        외부 HTML

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

        innerHTML을

        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

        1

        jQuery를 몇 번 언급?

        get_elements_by_inner("jQuery").length

        3

        단어 "진화 된 인공 두뇌"를 포함하는 모든 요소를 ​​가져옵니다 :

        get_elements_by_inner("Cybernetic")

      • 8.나는 다른 응답에 비해 새로운 구문 조금 짧은의 사용을 발견했다. 그래서 여기 내 제안이다 :

        나는 다른 응답에 비해 새로운 구문 조금 짧은의 사용을 발견했다. 그래서 여기 내 제안이다 :

        const callback = element => element.innerHTML == 'My research'

const elements = Array.from(document.getElementsByTagName('a'))
// [a, a, a, ...]

const result = elements.filter(callback)

console.log(result)
// [a]

        JSfiddle.net

      • 9.필요한 경우 <= IE11에서 user1106925의 작업에서 필터 방법을 얻으려면

        필요한 경우 <= IE11에서 user1106925의 작업에서 필터 방법을 얻으려면

        당신은 확산 연산자로 대체 할 수있다 :

        [] .slice.call (document.querySelectorAll ( "A"))

        그리고는 a.textContent.match와 전화 ( "검색어")를 포함

        이는 꽤 깔끔하게 작동합니다 :

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

      • 10.이 내부 텍스트로 얻을 수는 있지만, 난 당신이 잘못된 방향으로 향하고있다 생각합니다. 그 내부 문자열은 동적으로 생성되어 있습니까? 더 나은 아직 - - 그렇다면, 당신은 태그를 클래스 또는를 줄 수있는 ID를 텍스트가 거기에 갈 때. 그것의 정적 경우, 심지어는 쉽습니다.

        이 내부 텍스트로 얻을 수는 있지만, 난 당신이 잘못된 방향으로 향하고있다 생각합니다. 그 내부 문자열은 동적으로 생성되어 있습니까? 더 나은 아직 - - 그렇다면, 당신은 태그를 클래스 또는를 줄 수있는 ID를 텍스트가 거기에 갈 때. 그것의 정적 경우, 심지어는 쉽습니다.

      • 11.당신은 DOM 노드를 통해 이동하고 텍스트를 포함하는 모든 텍스트 노드를 찾아 그들의 부모를 반환하는 TreeWalker를 사용할 수 있습니다 :

        당신은 DOM 노드를 통해 이동하고 텍스트를 포함하는 모든 텍스트 노드를 찾아 그들의 부모를 반환하는 TreeWalker를 사용할 수 있습니다 :

        CONST findNodeByContent = (텍스트, 루트 =는 document.body) => { const를 treeWalker = document.createTreeWalker (루트, NodeFilter.SHOW_TEXT); CONST 노드 목록 = []; 반면 (treeWalker.nextNode ()) { CONST 노드 = treeWalker.currentNode; 경우 (node.nodeType === Node.TEXT_NODE && node.textContent.includes (텍스트)) { nodeList.push (node.parentNode); } }; 노드 목록을 반환; } CONST findNodeByContent 결과 = ( 'SearchingText'); CONSOLE.LOG (결과); SearchingText 를

      • 12.이 작업을 수행합니다. 텍스트를 포함하는 노드의 배열을 돌려줍니다.

        이 작업을 수행합니다. 텍스트를 포함하는 노드의 배열을 돌려줍니다.

        function get_nodes_containing_text(selector, text) {
    const elements = [...document.querySelectorAll(selector)];

    return elements.filter(
      (element) =>
        element.childNodes[0]
        && element.childNodes[0].nodeValue
        && RegExp(text, "u").test(element.childNodes[0].nodeValue.trim())
    );
  }

      • 13.나는 우리가 당신을 도울 당신이 좀 더 구체적으로해야합니다 생각합니다.

        나는 우리가 당신을 도울 당신이 좀 더 구체적으로해야합니다 생각합니다.

        텍스트가 고유 한 경우 (이 아니지만, 당신은 배열을 통해 실행해야 할 것이다 경우 또는 정말) 당신은 그것을 찾을 수있는 정규 표현식을 실행할 수 있습니다. PHP의는 preg_match ()를 사용하여 그것을 위해 작동합니다.

        당신은 자바 스크립트를 사용하고 ID 속성을 삽입 할 수있는 경우에, 당신은에서 getElementById ( 'ID')를 사용할 수 있습니다. https://developer.mozilla.org/en/DOM/element.1 : 그런 다음 DOM을 통해 반환 된 요소의 속성에 액세스 할 수 있습니다.

      • 14.난 그냥 특정 텍스트를 포함하는 요소를 얻을 수있는 방법이 필요했고 이것이 내가 생각 해낸 것입니다.

        난 그냥 특정 텍스트를 포함하는 요소를 얻을 수있는 방법이 필요했고 이것이 내가 생각 해낸 것입니다.

        사용 document.getElementsByInnerText는 () (여러 요소가 같은 정확한 텍스트가있을 수 있습니다) 여러 요소를 얻고, () 하나의 요소 (첫번째 일치)을 얻을 수 document.getElementByInnerText를 사용합니다.

        또한, (예를 들어, someElement.getElementByInnerText ()) 대신 문서의 요소를 사용하여 검색을 지역화 할 수 있습니다.

        당신은 크로스 브라우저 만들거나 사용자의 요구를 만족시키기 위하여 그것을 조정할 필요가있을 수 있습니다.

        나는 그대로 내가 떠날거야 그래서 코드가 자명하다고 생각합니다.

        HTMLElement.prototype.getElementsByInnerText = 기능 (텍스트, 탈출) { VAR 노드 = this.querySelectorAll ( "*"); VAR 일치 = []; 경우 (나는 텍스트 1 텍스트 2 텍스트 2 를 텍스트 3 에 특별 텍스트 4 에 Text5 Text6 를 Text7

      from https://stackoverflow.com/questions/3813294/how-to-get-element-by-innertext by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 DatePicker에서 onchange를 이벤트 문제  (0) 2020.10.07
[JQUERY] jQuery를 객체와 DOM 소자  (0) 2020.10.07
[JQUERY] window.open에 바이 패스 팝업 차단기 JQuery와에서는 event.preventDefault ()가 집합입니다  (0) 2020.10.07
[JQUERY] 어떻게 jQuery를 또는 자바 스크립트와 이중으로 통화 문자열을 변환하는?  (0) 2020.10.07
[JQUERY] 어떻게 .reset와 jQuery를 사용하여 양식을 재설정하는 () 메소드  (0) 2020.10.07
,

티스토리툴바