ইনারটেক্সট দ্বারা কীভাবে উপাদান পাবেন

Question

এইচটিএমএল পৃষ্ঠাতে কীভাবে ট্যাগ পাবেন, আমি যদি জানতে পারি কী পাঠ্য ট্যাগ রয়েছে। উদাহরণ:

<a ...>SearchingText</a>

Comments

পরিষ্কার, কার্যকরী পদ্ধতির অ্যারে স্ট্যাকওভারফ্লো.com

— পাভেল

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

@ অটোস্পঞ্জ আসলে ইনারএইচটিএমএল স্ট্যান্ডার্ড। ইনারটেক্সট এফএফ তে কাজ করে না

— আনামারিয়া

উদাহরণটি আপডেট করেছে, টেক্সট কনটেন্টটি সম্ভবত এই ক্ষেত্রে আপনি কী চান। ধন্যবাদ, ভাবেন :)

— আগস্ট লিলিয়াস

@ অগাস্টলিলিয়াস, এর কি অবস্থা i < il? এটা কি করছে?

— ডেভিড সোয়ার

আমি খুঁজে পেয়েছি যে যদি আপনার <span> <span> অনুসন্ধান পাঠ্য </ span> </span> থাকে তবে এই পদ্ধতিটি অভ্যন্তরীণটির পরিবর্তে বাইরের স্প্যানটি ফিরে আসতে পারে।

— কেভিন হুইলার

না, এই প্রশ্নটি জাভাস্ক্রিপ্ট এবং এইচটিএমএল সম্পর্কে, জাভা নয়

— আগস্ট লিলিয়াস

Answer 2

আপনি এটি সম্পাদন করতে এক্সপথ ব্যবহার করতে পারেন

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

আপনি এই এক্সপথটি ব্যবহার করে কিছু পাঠ্যযুক্ত একটি উপাদান অনুসন্ধান করতে পারেন:

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

Comments

এটি শীর্ষ উত্তর হওয়া উচিত। এক্সপথ আরও অনেক কিছু করতে পারে, যেমন অ্যাট্রিবিউট মান দ্বারা নোড নির্বাচন করুন, নোড সেটগুলি নির্বাচন করুন ... সাধারণ ভূমিকা: w3schools.com/xML/xpath_syntax.asp

— তিমিথন

প্রশ্নটি হল, এই

— কৌতূহলের

@vsync আমি মনে করি এটি অন্যান্য উত্তরগুলির তুলনায় দ্রুত হবে কারণ এক্সপাথটি ব্রাউজার দ্বারা প্রদত্ত অ্যালগরিদম দ্বারা অন্য সমস্ত উত্তরগুলির মতো জাভাস্ক্রিপ্টে চালিত না করে কার্যকর করা হয়। যদিও এটি একটি আকর্ষণীয় প্রশ্ন।

— carlin.scott

মনে হয় 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]যদিও সেগুলিতে আমার কাছে "সন্ধানকারী পাঠ্য" উপাদান রয়েছে।

— habষভ অগ্রহরি

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

পুরানো ব্রাউজারগুলির জন্য ডিফল্ট মান ট্যাগ = 'এ' এর জন্য বাবেলের প্রয়োজন হবে

Comments

এটি ভুল কারণ এটিতে সমস্ত শিশু নোডের ফলাফলও অন্তর্ভুক্ত রয়েছে। উদাহরণস্বরূপ, যদি শিশু নোড aথাকে str- ফলাফল elহিসাবে অন্তর্ভুক্ত করা হবে getElementsByText; যা ভুল।

— তুষারপাত

@ অববাহিকা 1 এটি অনাকাঙ্ক্ষিত কিনা তা নির্ভর করে। এটি অন্য ট্যাগ যেমন <span> </span> এ আবৃত থাকলেও পাঠ্য অনুসারে বাছাই করা প্রয়োজন হতে পারে

— পাওয়েল

Answer 7

কেবল আপনার স্ট্রিংটিকে নিম্নলিখিত লাইনে প্রবেশ করুন:

বাইরের এইচটিএমএল

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

ইনার এইচটিএমএল

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

প্রয়োজনে <= আইই 11 এ কাজ করে ব্যবহারকারীর কাছ থেকে ফিল্টার পদ্ধতি 10106925 পেতে

আপনি এর সাথে স্প্রেড অপারেটরটি প্রতিস্থাপন করতে পারেন:

[].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

আপনি TreeWalkerডিওএম নোডগুলি যেতে এবং টেক্সট ধারণ করে এমন সমস্ত পাঠ্য নোডগুলি সনাক্ত করতে এবং তাদের পিতামাতাকে ফিরিয়ে দিতে ব্যবহার করতে পারেন:

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

আমি মনে করি আপনাকে সাহায্য করার জন্য আমাদের আরও কিছুটা নির্দিষ্ট হওয়া দরকার।

1. আপনি কিভাবে এটি সন্ধান করছেন? জাভাস্ক্রিপ্ট? পিএইচপি? পার্ল?
2. আপনি ট্যাগ আইডি বৈশিষ্ট্য প্রয়োগ করতে পারেন?

যদি পাঠ্যটি অনন্য হয় (বা সত্যই, এটি না হয় তবে আপনাকে একটি অ্যারের মধ্য দিয়ে চলতে হবে) এটি সন্ধানের জন্য আপনি একটি নিয়মিত অভিব্যক্তি চালাতে পারেন। পিএইচপি এর preg_match () ব্যবহার করা তার জন্য কাজ করবে।

আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করছেন এবং কোনও আইডি বৈশিষ্ট্য সন্নিবেশ করতে পারেন তবে আপনি getElementById ('id') ব্যবহার করতে পারেন। তারপরে আপনি ডিওএমের মাধ্যমে ফিরে আসা উপাদানগুলির বৈশিষ্ট্যগুলি অ্যাক্সেস করতে পারবেন: https://developer.mozilla.org/en/DOM/element.1 ।

Answer 13

আমার সবেমাত্র একটি নির্দিষ্ট পাঠ্য রয়েছে এমন উপাদানটি পাওয়ার জন্য একটি উপায় প্রয়োজন এবং এটিই আমি এনেছি।

ব্যবহার করুন 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>

Answer 14

এটি কাজ করে।
সমন্বিত নোডের একটি অ্যারে প্রদান করে 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())
    );
  }