Tampermonkey でブラウザの特定の文字列・セリフの行だけをハイライトする【小説家になろう / jQuery / contains】

サイトに外部JavaScriptを適用できるTampermonkeyアドオンを使い、JavaScriptライブラリであるjQueryの、「contains」を使用して、特定文字列の行をハイライトする。

小説家になろうのセリフ行「」をハイライトするために調べた。
読みやすくなって便利。

Tampermonkeyのサンプルコード

小説家になろうのサイトにて、pタグ内に"「 "がある場合、テキストをスカイブルーに変更するサンプル。

• @requireでjQueryをロードする
• containsにより指定する。
• cssは"cssText"で変更する。
  • ダークテーマにするcssと併用しているとcssが上書きされてしまうので、!importantを使える書き方にした。

// ==UserScript==
// @name         「」行をハイライト
// @namespace    
// @version      0.1
// @description  「」行をハイライト
// @author       bookyakuno
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @match        https://ncode.syosetu.com/*
// @match        https://novel18.syosetu.com/*
// @license      MIT
// @grant        none
// ==/UserScript==



$(function() {
    $("p:contains('「')").css({"cssText" : "color : skyblue !important"});

});

TampermonkeyでjQueryを使用する方法 | JavaScript / jQuery

特定の文字列が含まれているテキストの色を変えるjQuery | HTML・CSS・jQuery・PHPを徹底解説！【Web担当者の作り方】