[javascript] Javascript .querySelector는 innerTEXT로 <div>를 찾습니다.

Program / 글쓴이

특정 텍스트로 DIV를 어떻게 찾을 수 있습니까? 예를 들면 :

<div>
SomeText, text continues.
</div>

다음과 같이 사용하려고합니다.

var text = document.querySelector('div[SomeText*]').innerTEXT;
alert(text);

그러나 물론 작동하지 않습니다. 내가 어떻게 해?

답변

OP의 질문은 jQuery가 아닌 일반 JavaScript 에 관한 것 입니다. 많은 답변이 있고 @Pawan Nogariya 답변을 좋아하지만 이 대안을 확인하십시오.

JavaScript에서 XPATH 를 사용할 수 있습니다 . MDN 기사에 대한 자세한 정보는 여기 .

이 document.evaluate()메서드는 XPATH 쿼리 / 표현식을 평가합니다. 따라서 거기에 XPATH 표현식을 전달하고 HTML 문서로 이동하여 원하는 요소를 찾을 수 있습니다.

XPATH에서 다음과 같은 텍스트 노드로 요소를 선택할 수 있습니다. whch는 다음 텍스트 노드가있는 요소를 가져옵니다 div.

//div[text()="Hello World"]

일부 텍스트를 포함하는 요소를 얻으려면 다음을 사용하십시오.

//div[contains(., 'Hello')]

contains()XPATH 의 메소드는 노드를 첫 번째 매개 변수로 사용하고 텍스트를 두 번째 매개 변수로 검색합니다.

여기 에서이 plunk를 확인하십시오. 이것은 JavaScript에서 XPATH를 사용한 예제입니다.

다음은 코드 스 니펫입니다.

var headings = document.evaluate("//h1[contains(., 'Hello')]", document, null, XPathResult.ANY_TYPE, null );
var thisHeading = headings.iterateNext();

console.log(thisHeading); // Prints the html element in console
console.log(thisHeading.textContent); // prints the text content in console

thisHeading.innerHTML += "<br />Modified contents";

보시다시피 HTML 요소를 가져 와서 원하는대로 수정할 수 있습니다.

답변

이 매우 간단한 솔루션을 사용할 수 있습니다.

Array.from(document.querySelectorAll('div'))
  .find(el => el.textContent === 'SomeText, text continues.');

  1. 은 Array.from(확산 연산자 또는 슬라이스와 같은 이렇게 여러 방법이있다) 배열로 노드 목록을 변환 할

  2. 결과는 이제 배열이되어 Array.find메소드 를 사용할 수있게되며 , 그런 다음 모든 술어를 넣을 수 있습니다. 정규식 또는 원하는대로 textContent를 확인할 수도 있습니다.

참고 Array.from및 Array.findES2015 기능은 다음과 같습니다. 트랜스 파일러없이 IE10과 같은 이전 브라우저와 호환됩니다.

Array.prototype.slice.call(document.querySelectorAll('div'))
  .filter(function (el) {
    return el.textContent === 'SomeText, text continues.'
  })[0];

답변

당신이 자바 스크립트에서 요청했기 때문에 다음과 같은 것을 가질 수 있습니다.

function contains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return Array.prototype.filter.call(elements, function(element){
    return RegExp(text).test(element.textContent);
  });
}

그리고 이렇게 부르세요

contains('div', 'sometext'); // find "div" that contain "sometext"
contains('div', /^sometext/); // find "div" that start with "sometext"
contains('div', /sometext$/i); // find "div" that end with "sometext", case-insensitive

답변

이 솔루션은 다음을 수행합니다.

  • ES6 확산 연산자를 사용하여 모든 div의 NodeList를 배열 로 변환합니다 .

  • (가) 경우 출력을 제공 div 포함 쿼리 문자열을 정확히 아닌 경우, 동일 (다른 답변의 일부 발생하는) 쿼리 문자열을. 예 : ‘SomeText’뿐만 아니라 ‘SomeText, text continue’에 대한 출력도 제공해야합니다.

  • div쿼리 문자열뿐만 아니라 전체 내용을 출력합니다 . 예를 들어 ‘SomeText, text continue’의 경우 ‘SomeText’뿐만 아니라 전체 문자열을 출력해야합니다.

  • 여러 개의 div에 단일 div.

[...document.querySelectorAll('div')]      // get all the divs in an array
  .map(div => div.innerHTML)               // get their contents
  .filter(txt => txt.includes('SomeText')) // keep only those containing the query
  .forEach(txt => console.log(txt));       // output the entire contents of those
<div>SomeText, text continues.</div>
<div>Not in this div.</div>
<div>Here is more SomeText.</div>

스 니펫 확장

답변

쿼리하는 div의 상위 요소가 있는지 확인하는 것이 가장 좋습니다. 그렇다면 부모 요소를 가져 와서 element.querySelectorAll("div"). 일단 속성 nodeList에 필터를 적용하십시오 innerText. 우리가 쿼리되는 사업부의 부모 요소가 있다고 가정 id의 container. 일반적으로 ID에서 직접 컨테이너에 액세스 할 수 있지만 적절한 방법으로합시다.

var conty = document.getElementById("container"),
     divs = conty.querySelectorAll("div"),
    myDiv = [...divs].filter(e => e.innerText == "SomeText");

그게 다입니다.

답변

jquery 또는 이와 비슷한 것을 사용하지 않으려면 다음을 시도해 볼 수 있습니다.

function findByText(rootElement, text){
    var filter = {
        acceptNode: function(node){
            // look for nodes that are text_nodes and include the following string.
            if(node.nodeType === document.TEXT_NODE && node.nodeValue.includes(text)){
                 return NodeFilter.FILTER_ACCEPT;
            }
            return NodeFilter.FILTER_REJECT;
        }
    }
    var nodes = [];
    var walker = document.createTreeWalker(rootElement, NodeFilter.SHOW_TEXT, filter, false);
    while(walker.nextNode()){
       //give me the element containing the node
       nodes.push(walker.currentNode.parentNode);
    }
    return nodes;
}

//call it like
var nodes = findByText(document.body,'SomeText');
//then do what you will with nodes[];
for(var i = 0; i < nodes.length; i++){
    //do something with nodes[i]
}

텍스트를 포함하는 배열에 노드가 있으면 작업을 수행 할 수 있습니다. 각각 경고하거나 콘솔에 인쇄하십시오. 한 가지주의 할 점은 이것이 반드시 div 자체를 가져 오지 않을 수도 있다는 것입니다. 그러면 찾고있는 텍스트가있는 텍스트 노드의 부모를 가져옵니다.

답변

데이터 속성의 텍스트 길이에는 제한이 없으므로 데이터 속성을 사용하십시오! 그런 다음 일반 CSS 선택기를 사용하여 OP가 원하는 요소를 선택할 수 있습니다.

for (const element of document.querySelectorAll("*")) {
  element.dataset.myInnerText = element.innerText;
}

document.querySelector("*[data-my-inner-text='Different text.']").style.color="blue";
<div>SomeText, text continues.</div>
<div>Different text.</div>

스 니펫 확장

이상적으로는 문서로드시 데이터 속성 설정 부분을 수행하고 성능을 위해 querySelectorAll 선택기의 범위를 좁 힙니다.