Làm thế nào để có được phần tử bằng InternalText

Cách lấy thẻ trong trang html, nếu tôi biết thẻ văn bản chứa gì. Ví dụ:

<a ...>SearchingText</a>

Bạn sẽ phải đi qua bằng tay.

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

Bạn có thể sử dụng xpath để thực hiện điều này

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

Bạn cũng có thể tìm kiếm một phần tử có chứa một số văn bản bằng xpath này:

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

Sử dụng cú pháp hiện đại nhất có sẵn tại thời điểm này, nó có thể được thực hiện rất sạch sẽ như thế này:

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

Hoặc với một bộ lọc riêng:

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

Đương nhiên, các trình duyệt cũ sẽ không xử lý việc này, nhưng bạn có thể sử dụng bộ chuyển mã nếu cần hỗ trợ kế thừa.

Bạn có thể sử dụng jQuery : chứa () 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>

Tất nhiên, một cách đơn giản hơn vẫn là:

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>

Người giới thiệu:

• Array.prototype.filter().
• Array.prototype.forEach().
• Array.prototype.slice().
• assessment ? ifTrue : ifFalseToán tử có điều kiện ('ternary', ) .
• Function.prototype.call().
• typeofNhà điều hành .

Phương pháp tiếp cận chức năng. Trả về mảng của tất cả các yếu tố phù hợp và cắt không gian xung quanh trong khi kiểm tra.

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

Sử dụng

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

nếu bạn đang xem qua các thẻ khác nhau, ví dụ như span hoặc nút

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

Thẻ giá trị mặc định = 'a' sẽ cần Babel cho các trình duyệt cũ

Chỉ cần chuyển chuỗi con của bạn vào dòng sau:

HTML bên ngoài

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

HTML bên trong

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

Bạn có thể sử dụng chúng để tìm kiếm trong toàn bộ tài liệu và truy xuất các thẻ có chứa thuật ngữ tìm kiếm của bạn:

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

Cách sử dụng :

Người dùng "T3rm1" được nhắc đến bao nhiêu lần trên trang này?

get_elements_by_inner("T3rm1").length

1

JQuery được nhắc đến bao nhiêu lần?

get_elements_by_inner("jQuery").length

3

Nhận tất cả các yếu tố có chứa từ "Điện từ":

get_elements_by_inner("Cybernetic")

Tôi thấy việc sử dụng cú pháp mới hơn ngắn hơn một chút so với câu trả lời khác. Vì vậy, đây là đề xuất của tôi:

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

Để có được phương thức lọc từ user1106925 động trong <= IE11 nếu cần

Bạn có thể thay thế toán tử trải bằng:

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

và cuộc gọi bao gồm với a.textContent.match("your search term")

hoạt động khá gọn gàng:

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

Mặc dù có thể nhận được bằng văn bản bên trong, tôi nghĩ rằng bạn đang đi sai hướng. Là chuỗi bên trong được tạo động? Nếu vậy, bạn có thể cung cấp cho thẻ một lớp hoặc - tốt hơn - ID khi văn bản đi vào đó. Nếu nó tĩnh, thì nó thậm chí còn dễ dàng hơn.

Bạn có thể sử dụng a TreeWalkerđể đi qua các nút DOM và định vị tất cả các nút văn bản có chứa văn bản và trả về cha mẹ của chúng:

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>

Tôi nghĩ bạn sẽ cần phải cụ thể hơn một chút để chúng tôi giúp bạn.

1. Làm thế nào bạn tìm thấy điều này? Javascript? PHP? Perl?
2. Bạn có thể áp dụng một thuộc tính ID cho thẻ không?

Nếu văn bản là duy nhất (hoặc thực sự, nếu không, nhưng bạn phải chạy qua một mảng), bạn có thể chạy một biểu thức thông thường để tìm thấy nó. Sử dụng preg_match () của PHP sẽ hoạt động cho điều đó.

Nếu bạn đang sử dụng Javascript và có thể chèn một thuộc tính ID, thì bạn có thể sử dụng getEuityById ('id'). Sau đó, bạn có thể truy cập các thuộc tính của phần tử được trả về thông qua DOM: https://developer.mozilla.org/en/DOM/element.1 .

Tôi chỉ cần một cách để có được phần tử có chứa một văn bản cụ thể và đây là những gì tôi nghĩ ra.

Sử dụng document.getElementsByInnerText()để có được nhiều yếu tố (nhiều yếu tố có thể có cùng một văn bản chính xác) và sử dụng document.getElementByInnerText()để chỉ lấy một yếu tố (khớp đầu tiên).

Ngoài ra, bạn có thể bản địa hóa tìm kiếm bằng cách sử dụng một yếu tố (ví dụ someElement.getElementByInnerText()) thay vì document.

Bạn có thể cần phải điều chỉnh nó để làm cho nó đa trình duyệt hoặc đáp ứng nhu cầu của bạn.

Tôi nghĩ rằng mã là tự giải thích, vì vậy tôi sẽ để nó như vậy.

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>

Đây là công việc.
Trả về một mảng các nút chứa 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())
    );
  }