इनरटेक्स्ट द्वारा एलिमेंट कैसे प्राप्त करें

Question

Html पेज में टैग कैसे प्राप्त करें, अगर मुझे पता है कि टेक्स्ट टैग में क्या है। उदाहरण के लिए:

<a ...>SearchingText</a>

Comments

स्वच्छ, सरणी कार्यात्मक दृष्टिकोण लौटने stackoverflow.com/a/45089849/696535

— पावेल

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

Comments

@ ऑटो एक्सपो वास्तव में इनर HTML मानक है। इनरटेक्स्ट FF में काम नहीं करता है

— अनामरिया

उदाहरण को अपडेट किया गया, टेक्स्टकॉन्टेंट संभावना है कि आप इस मामले में क्या चाहते हैं। धन्यवाद, लोग :)

— अगस्त लिलियास

@AugustLilleaas, के साथ क्या है i < il? वह क्या कर रहा है?

— डेविड सॉयर

मैंने पाया है कि यदि आपके पास <span> <span> खोज पाठ </ span> </ span> है, तो यह विधि भीतर के बजाय बाहरी स्पैन को लौटा सकती है।

— केविन व्हीलर

नहीं, यह सवाल जावास्क्रिप्ट और HTML के बारे में है, जावा पर नहीं

— अगस्त लिलियास

Answer 2

इसे पूरा करने के लिए आप 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')]";

Comments

यह शीर्ष उत्तर होना चाहिए। XPath बहुत अधिक कर सकता है, जैसे विशेषता मान द्वारा नोड का चयन करें, नोड सेट का चयन करें ... सरल परिचय: w3schools.com/xml/xpath_syntax.asp

— Timathon

प्रश्न है, इस प्रवंचना के लिए प्रदर्शन का दंड क्या है

— vsync

@vsync मुझे लगता है कि यह किसी भी अन्य उत्तर की तुलना में तेज़ होगा क्योंकि xpath को ब्राउज़र द्वारा प्रदान किए गए एल्गोरिदम द्वारा निष्पादित किया गया है, बल्कि यहां अन्य सभी उत्तरों की तरह जावास्क्रिप्ट में निष्पादित करने के बजाय। हालांकि यह एक दिलचस्प सवाल है।

— carlin.scott

IE ब्राउज़र में लगता Document.evaluate() नहीं है

— vsync

मुझे पता नहीं क्यों, लेकिन किसी तरह var xpath = "//a[text()='SearchingText']"; यह काम नहीं कर रहा है, लेकिन var xpath = "//a[contains(text(),'Searching')]"; यह काम करता है। एक्सैप्ड कैरेक्टर से अवगत रहें, जैसे कि \ '\'।

— जॉय चो

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

स्वाभाविक रूप से, लीगेसी ब्राउज़र इसे संभाल नहीं पाएंगे, लेकिन यदि लीगेसी समर्थन की आवश्यकता है, तो आप ट्रांसपिलर का उपयोग कर सकते हैं।

Comments

<3 फ़िल्टर दृष्टिकोण

— जॉन वांडिवियर

Answer 4

आप jQuery का उपयोग कर सकते हैं : जिसमें () चयनकर्ता है

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

Comments

मुझे मिलता है: Error: <![EX[["Tried to get element with id of \"%s\" but it is not present on the page","a:contains('SearchingText')"]]]> TAAL[1]हालांकि मेरे पास "SearchingText" के तत्व हैं।

— ऋषभ अग्रहरी

Answer 5

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 6

क्रियात्मक दृष्टिकोण। जाँच करते समय सभी मिलान किए गए तत्वों और ट्रिम्स रिक्त स्थान की सरणी देता है।

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 की आवश्यकता होगी

Comments

यह गलत है क्योंकि इसमें सभी बाल नोड्स के परिणाम भी शामिल हैं। यानी अगर बच्चे के नोड में aशामिल होगा str- परिणाम elमें शामिल किया जाएगा getElementsByText; क्या गलत है।

— हिमस्खलन 1

@ हिमस्खलन 1 यह निर्भर करता है कि यह अवांछनीय है या नहीं। पाठ द्वारा चयन करने की आवश्यकता हो सकती है, भले ही वह किसी अन्य टैग में लिपटे हो </ span> </ span>

— पावेल

Answer 7

बस निम्नलिखित लाइन में अपना सबस्ट्रिंग पास करें :

बाहरी 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

1

JQuery का उल्लेख कितनी बार किया गया है?

get_elements_by_inner("jQuery").length

3

"साइबरनेटिक" शब्द वाले सभी तत्वों को प्राप्त करें:

get_elements_by_inner("Cybernetic")

Comments

यह सही या गलत है लेकिन तत्व नहीं है।

— T3rm1

आप पुनः प्राप्त तत्वों के माध्यम से पुनरावृति करने के लिए सत्य स्थिति का उपयोग कर सकते हैं और उन तत्वों से कुछ भी ले सकते हैं जिनकी आपको आवश्यकता है। अद्यतन उत्तर देखें।

— साइबरनेटिक

Answer 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

Answer 9

जरूरत पड़ने पर <= IE11 में काम करने वाले user1106925 से फिल्टर विधि प्राप्त करने के लिए

आप के साथ प्रसार ऑपरेटर की जगह ले सकते हैं:

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

और के साथ कॉल भी शामिल है a.textContent.match("your search term")

जो बड़े करीने से काम करता है:

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

Comments

मुझे यह तरीका पसंद है। आप भी कर सकते हैं Array.fromके बजाय [].slice.call। उदाहरण के लिए: Array.from(document.querySelectorAll('a'))

— रिचर्ड

Answer 10

जबकि आंतरिक पाठ से इसे प्राप्त करना संभव है, मुझे लगता है कि आप गलत तरीके से बढ़ रहे हैं। क्या वह आंतरिक तार गतिशील रूप से उत्पन्न होता है? यदि ऐसा है, तो आप टैग को एक कक्षा या - अभी तक बेहतर - आईडी दे सकते हैं जब पाठ वहां जाता है। यदि यह स्थिर है, तो यह और भी आसान है।

Answer 11

आप TreeWalkerDOM नोड्स पर जाने के लिए, और उन सभी टेक्स्ट नोड्स का पता लगा सकते हैं, जिनमें टेक्स्ट होता है, और उनके माता-पिता को लौटाते हैं:

const findNodeByContent = (text, root = document.body) => {
  const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);

  const nodeList = [];

  while (treeWalker.nextNode()) {
    const node = treeWalker.currentNode;

    if (node.nodeType === Node.TEXT_NODE && node.textContent.includes(text)) {
      nodeList.push(node.parentNode);
    }
  };

  return nodeList;
}

const result = findNodeByContent('SearchingText');

console.log(result);

<a ...>SearchingText</a>

Answer 12

यह काम करता है।
नोड्स युक्त एक सरणी देता है text।

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())
    );
  }

Answer 13

मुझे लगता है कि आपको हमारी मदद करने के लिए आपको थोड़ा और विशिष्ट होने की आवश्यकता होगी।

1. आप इसे कैसे पा रहे हैं? जावास्क्रिप्ट? पीएचपी? पर्ल?
2. क्या आप टैग में एक आईडी विशेषता लागू कर सकते हैं?

यदि पाठ अद्वितीय है (या वास्तव में, यदि यह नहीं है, लेकिन आपको एक सरणी से चलना होगा) तो आप इसे खोजने के लिए एक नियमित अभिव्यक्ति चला सकते हैं। PHP के preg_match () का उपयोग करना उसके लिए काम करेगा।

यदि आप जावास्क्रिप्ट का उपयोग कर रहे हैं और एक आईडी विशेषता डाल सकते हैं, तो आप getElementById ('id') का उपयोग कर सकते हैं। तब आप DOM के माध्यम से दिए गए एलिमेंट की विशेषताओं को एक्सेस कर सकते हैं: https://developer.mozilla.org/en/DOM/element.1 ।

Answer 14

मुझे केवल उस तत्व को प्राप्त करने के लिए एक तरीके की आवश्यकता है जिसमें एक विशिष्ट पाठ शामिल है और यही वह है जिसके साथ मैं आया था।

document.getElementsByInnerText()कई तत्वों को प्राप्त करने के लिए उपयोग करें (कई तत्वों में एक ही सटीक पाठ हो सकता है), और document.getElementByInnerText()सिर्फ एक तत्व (पहला मैच) प्राप्त करने के लिए उपयोग करें।

इसके अलावा, आप इसके someElement.getElementByInnerText()बजाय एक तत्व (जैसे ) का उपयोग करके खोज को स्थानीय कर सकते हैं document।

इसे क्रॉस-ब्राउज़र बनाने या अपनी आवश्यकताओं को पूरा करने के लिए आपको इसे मोड़ने की आवश्यकता हो सकती है।

मुझे लगता है कि कोड स्वयं-व्याख्यात्मक है, इसलिए मैं इसे वैसे ही छोड़ दूँगा।

HTMLElement.prototype.getElementsByInnerText = function (text, escape) {
    var nodes  = this.querySelectorAll("*");
    var matches = [];
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].innerText == text) {
            matches.push(nodes[i]);
        }
    }
    if (escape) {
        return matches;
    }
    var result = [];
    for (var i = 0; i < matches.length; i++) {
        var filter = matches[i].getElementsByInnerText(text, true);
        if (filter.length == 0) {
            result.push(matches[i]);
        }
    }
    return result;
};
document.getElementsByInnerText = HTMLElement.prototype.getElementsByInnerText;

HTMLElement.prototype.getElementByInnerText = function (text) {
    var result = this.getElementsByInnerText(text);
    if (result.length == 0) return null;
    return result[0];
}
document.getElementByInnerText = HTMLElement.prototype.getElementByInnerText;

console.log(document.getElementsByInnerText("Text1"));
console.log(document.getElementsByInnerText("Text2"));
console.log(document.getElementsByInnerText("Text4"));
console.log(document.getElementsByInnerText("Text6"));

console.log(document.getElementByInnerText("Text1"));
console.log(document.getElementByInnerText("Text2"));
console.log(document.getElementByInnerText("Text4"));
console.log(document.getElementByInnerText("Text6"));

<table>
    <tr>
        <td>Text1</td>
    </tr>
    <tr>
        <td>Text2</td>
    </tr>
    <tr>
        <td>
            <a href="#">Text2</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="#"><span>Text3</span></a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="#">Special <span>Text4</span></a>
        </td>
    </tr>
    <tr>
        <td>
            Text5
            <a href="#">Text6</a>
            Text7
        </td>
    </tr>
</table>