ブラウザでコンソールアプリケーションを使用してウェブサイトのセクションを色で検索することはできますか？

たとえば、500以上のページを印刷する非常に長いWebページを訪問したとします。このウェブページ全体を通して、明るい緑色を使用して強調表示されている単語がいくつかあります。 ChromeのCLIを使用してこの色でハイライト表示された単語を検索する方法はありますか？ブラウザでコンソールアプリケーションを使用してウェブサイトのセクションを色で検索することはできますか？

出典

2017-05-09 Floam

あなたの質問は曖昧ですが、合理的なサイトの通常の解決方法は、 'document.querySelectorAll（" classWhichGivesThatStyle "）' –

と入力することです。あなたの教授は講義ノートを含む巨大な単一のウェブページをあなたに提供します。彼は定期的に重要な言葉を明るい緑色でハイライトします。私はその色で強調表示されているすべての単語を見つけることができるようにしたい。 – Floam

それは1995年ではないと仮定して、Web上の要素に色を直接与えることはなく、それらにクラスを与えます。したがって、 'querySelectorAll'を簡単に使うことができます。 –

ステップ1は、テキストを検査し、ハイリゲット部分を検査することです。ハイライトテキストはさまざまな方法で実行できます。

<body> 
Here is an example of <mark>highlight text</mark> using mark 
Here is an example of <span class="highlight">highlight text</span> using span with class 
Here is an example of <span style="background-color: #FFFF00">highlight text</span> using span with style 
</body>

私の推測では、<span class="highlight">が使用されていることである（おそらくクラスの別の名前で）：ちょうどいくつかの名前を付けます。

したがって、テキストがどのように強調表示されているかに応じて、CLIでdifferntコマンドを使用して検索します。あなたはページがテキストをハイライトでどのように知っているとき、あなたは（上記の例のために）ことによってそれを見つけることを開始することができます

document.querySelectorAll("mark") 
document.querySelectorAll(".highlight") 
document.querySelectorAll("span[style^='background-color:']")

出典

2017-05-09 14:42:31 Cleared

クイックフォローアップの質問。私が必要とするデータはtextContentフィールドにあります。そのクラス内の他のフィールドを抑制する方法はありますか？ – Floam

私は質問を理解していると確信しています。しかし、 'document.querySelectorAll（"。owner "）'はあなたに配列を与えます。そして、 "最初の"アイテムのテキスト/コンテンツを取得するには、 'document.querySelectorAll（" owner "）[0] .textContent'を実行します。 2番目の '[1]'の項目などと同様です。 – Cleared

それは私が必要なものです！本当にありがとう！ – Floam

は、はい、それは可能であり、強調表示の要素が多分そうだとすれば、スタイルは、HTML要素の上に直接ある場合、あなたは正規表現を持つ要素を見つけることができますdocument.querySelectiorAll('.highlight_class')

を使用することができ、そのハイライトの色を与えるクラスを持っています。

出典

2017-05-09 14:41:05 Mokkun

あなたは背景色がクラスまたはインラインスタイルを使用して追加されているかどうかがわからない場合は、次のコマンドを使用します。

const paras = Array.prototype.slice.call(document.querySelectorAll('p')); 
 
const output = paras.filter(para => window.getComputedStyle(para).getPropertyValue('background-color') === 'green');

それは、背景色の緑を持つ段落のあなたの配列を与えます。それに応じて値を変更して、目的の結果を得ます。

出典

2017-05-09 14:47:02 warcops

ブラウザでコンソールアプリケーションを使用してウェブサイトのセクションを色で検索することはできますか？

答えて

関連する問題