CNN StudentNewsのTranscriptを見やすくする

CNN Student News - Archive - CNN.comを英語の学習に使っている人は多いはず

でも、Transcriptが見にくいと思った

個人的に

ピリオドのあとに改行があると読みやすい
セリフなのか話者を表しているのかを区別して欲しい
行間は広すぎない方が好き

というニーズがあったので、GreasemonkeyのUser Scriptとして実現した

作ったもの

Gistに置いた
https://gist.github.com/petitviolet/eb1836eef8d72e736404

ここをクリックするとインストール出来る

// ==UserScript==
// @name        CNN_StudentNews_Style
// @namespace   petitviolet
// @include     http://transcripts.cnn.com/TRANSCRIPTS/**/*
// @version     1
// @grant       none
// ==/UserScript==
(function CnnStudentNewsStyle() {
  console.log("modify style...");
  // body of transcript
  var body = document.getElementsByClassName("cnnBodyText")[2];
  // start a new line after period(.)
  var contents = body.innerHTML.replace(/\.\s/g, ".<br>");
  // extract speaker's name
  var regex = /^\s*(.+?):(.*)$/g;
  var brs = contents.split("<br>");
  var result_texts = [];

  for (var i in brs) {
    var result = regex.exec(brs[i])
    if (result != null) {
      var name = result[1];
      var text = result[2];
      name = "<br><span style='color:#944'>" + name + ":</span><br>";
      result_texts.push(name + text);
    } else if (result != ""){
      result_texts.push(brs[i]);
    }
  }
  // remove too much <br> tags
  body.innerHTML = result_texts.join("<br>").replace(/<br> <br>/g, "<br>");
  console.log("end!");
})();