İnnerText tarafından nasıl eleman alınır?

HTML etiketi içeriyorsa, html sayfasında etiket nasıl alınır. Örneğin:

<a ...>SearchingText</a>

Elle hareket etmek zorunda kalacaksınız.

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

Bunu başarmak için xpath kullanabilirsiniz

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

Bu xpath'i kullanarak bazı metinler içeren bir öğeyi de arayabilirsiniz:

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

Şu anda mevcut olan en modern sözdizimini kullanarak, bu şekilde çok temiz bir şekilde yapılabilir:

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

Veya ayrı bir filtreyle:

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

Doğal olarak, eski tarayıcılar bunu yapmaz, ancak eski desteğe ihtiyaç duyulursa bir transpiler kullanabilirsiniz.

JQuery kullanabilirsiniz : include () 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>

Tabii ki, biraz daha basit bir yol hala:

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>

Referanslar:

• Array.prototype.filter().
• Array.prototype.forEach().
• Array.prototype.slice().
• Koşullu ('üçlü', assessment ? ifTrue : ifFalse) operatör .
• Function.prototype.call().
• typeofoperatörü .

Işlevsel yaklaşım. Eşleşen tüm öğelerin dizisini döndürür ve kontrol sırasında etrafındaki boşlukları keser.

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

kullanım

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

span veya button gibi farklı etiketler arıyorsanız

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

Varsayılan değer etiketi = 'a' eski tarayıcılar için Babel'e ihtiyaç duyacaktır

Alt dizenizi aşağıdaki satıra geçirmeniz yeterlidir :

Dış HTML

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

İç HTML

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

Tüm belgede arama yapmak ve arama teriminizi içeren etiketleri almak için bunları kullanabilirsiniz :

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

Kullanımı :

"T3rm1" kullanıcısı bu sayfada kaç kez bahsedildi?

get_elements_by_inner("T3rm1").length

1

JQuery'den kaç kez bahsedildi?

get_elements_by_inner("jQuery").length

3

"Sibernetik" kelimesini içeren tüm öğeleri alın:

get_elements_by_inner("Cybernetic")

Yeni sözdiziminin kullanımını diğerlerinin cevabına göre biraz daha kısa buldum. İşte benim teklifim:

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

Filtre yöntemini user1106925'ten almak için <= IE11'de çalışan

Forma operatörünü aşağıdakilerle değiştirebilirsiniz:

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

ve içerdiği çağrı a.textContent.match("your search term")

oldukça düzgün çalışan:

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

İç metne ulaşmak mümkün olsa da, bence yanlış yöne gidiyorsunuz. Bu iç dize dinamik olarak mı oluşturulmuş? Öyleyse, metin oraya girdiğinde etikete bir sınıf veya - daha iyisi - kimlik verebilirsiniz. Statik ise, o zaman daha da kolaydır.

Bir kullanabilirsiniz TreeWalkerDOM ağının üzerine gidin ve metni içeren tüm metin düğümleri bulun ve velilerine dönmek için:

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>

Bu işi yapar.
İçeren bir düğüm dizisi döndürür 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())
    );
  }

Sana yardım edebilmemiz için biraz daha spesifik olman gerektiğini düşünüyorum.

1. Bunu nasıl buluyorsun? JavaScript? PHP? Perl?
2. Etikete bir kimlik özelliği uygulayabilir misiniz?

Metin benzersizse (veya gerçekten değilse, ancak bir dizi üzerinden geçmeniz gerekiyorsa) bulmak için normal bir ifade çalıştırabilirsiniz. PHP'nin preg_match () yöntemi bunun için kullanılabilir.

Javascript kullanıyorsanız ve bir ID niteliği ekleyebiliyorsanız getElementById ('id') kullanabilirsiniz. Ardından, döndürülen öğenin özelliklerine DOM üzerinden erişebilirsiniz: https://developer.mozilla.org/en/DOM/element.1 .

Ben sadece belirli bir metin içeren öğeyi almak için bir yol ihtiyacım vardı ve ben geldim budur.

document.getElementsByInnerText()Birden çok öğe almak için kullanın (birden çok öğe aynı tam metne sahip olabilir) ve document.getElementByInnerText()yalnızca bir öğe almak için kullanın (ilk eşleşme).

Ayrıca, arama someElement.getElementByInnerText()yerine yerine bir öğe (ör. ) Kullanarak yerelleştirebilirsiniz document.

Çapraz tarayıcı yapmak veya ihtiyaçlarınızı karşılamak için ince ayar yapmanız gerekebilir.

Kod kendi kendini açıklayıcı olduğunu düşünüyorum, bu yüzden olduğu gibi bırakacağım.

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>