入力欄のキーワード強調表示（highlight.js）- by AOK

■ 入力欄のキーワード強調表示（highlight.js）

textarea 内で、入力とともに強調表示を行うカスタム要素（HIGH-LIGHT）を作成しました。まだ、日本語入力やスマホへの対応が不十分なので用途を限定した使い方しかできません。あらゆるケースに対応するにはまだまだ時間がかかりそうです。

キーワードの強調：

祇園精舎の鐘の声、諸行無常の響あり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。遠く異朝をとぶらへば、秦の趙高、漢の王莽、梁の周伊、唐の禄山、是等は皆旧主先皇の政にもしたがはず、楽みをきはめ、諫をも思ひいれず、天下の乱れむ事をさとらずして、民間の愁る所を知らざツしかば、久しからずして、亡じにし者どもなり。近く本朝をうかがふに、承平の将門、天慶の純友、康和の義親、平治の信頼、此等はおごれる心もたけき事も、皆とりどりにこそありしかども、まぢかくは六波羅の入道前太政大臣平朝臣清盛公と申しし人の有様、伝へ承るこそ、心も詞も及ばれね。

JavaScript の構文強調：

/* * Convert special HTML entities back to characters. * */ var htmlspecialchars_decode = function(s) { var c = {'gt':">",'lt':"<",'#039':"'",'quot':"\"",'amp':"&"}; return s.replace(/&(gt|lt|#039|quot|amp);/ig, function($0, $1) { return c[$1]; }); };

■ ソース

/*
 *  Highlight keywords.
 *
 *   s: input string
 *   k: array of keywords
 *   c: class name for css
 *
 */
var highlighting = function(s, k, c) {
  k.sort(function(a, b) {
    if (a < b) return 1;
    if (a > b) return -1;
    return 0;
  }).forEach(function(x) {
    s = s.replaceAll(x, `\x02${x}\x03`);
  });
  s = s.replace(/\x02/g, `<span style="${c}">`);
  s = s.replace(/\x03/g, `</span>`);
  return s;
};

jQuery(function($) {

  var k = [
    '趙高', '王莽', '周伊', '禄山', '将門',
    '純友', '義親', '信頼', '清盛'
  ];

  var d1 = document.querySelector('high-light#D1');
  d1.highlight = function(html) {
    return highlighting(html, k, 'background-color:yellow;color:red');
  };

  var d2 = document.querySelector('high-light#D2');
  d2.highlight = function(html) {
    const s = this.un_esc_html(html);
    const s1 = s.match(/^\s*/)[0];
    const s2 = s.match(/\s*$/)[0];
    const pre = new JSParser().parse(s);
    return s1 + $(pre).html() + s2;
  };

  $('form').on('submit', function() {
    $('input[name=T1]').val(d1.value);
    $('input[name=T2]').val(d2.value);
  });

});

JavaScript Sample

■ 入力欄のキーワード強調表示（highlight.js）

■ ソース

■ ソース（highlight.js）