1. ホーム
  2. javascript

[解決済み] Javascript .querySelector find <div> by innerTEXT

2022-04-22 08:05:34

Question

How can I find DIV with certain text? For example:

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

Trying to use something like this:

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

But ofcourse it will not work. How can I do it?

How to solved?

OP's question is about plain JavaScript and not jQuery . Although there are plenty of answers and I like @Pawan Nogariya answer , please check this alternative out.

を使用することができます。 XPATH をJavaScriptで実行します。詳しくはMDNの記事で こちら .

document.evaluate() メソッドは XPATH クエリ/式を評価します。したがって、そこに XPATH 式を渡すと、HTML ドキュメントを走査して目的の要素を見つけることができます。

XPATHでは、以下のようにテキストノードで要素を選択することができます。 div は、次のようなテキスト・ノードを持つ。

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

テキストを含む要素を取得するには、次のようにします。

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

contains() メソッドは、最初のパラメータとしてノードを、2番目のパラメータとして検索するテキストを受け取ります。

この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要素を掴んで好きなように変更することができます。