特定の文字を装飾したい

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>特定の文字を装飾したい</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  8. <script type="text/javascript">
  9.   function viewModel() {
  10.     var self = this;
  11.     
  12.     self.viewTxt = ko.observable("丸ごとシマウマ");
  13.     self.search = ko.observable("シマウマ");
  14.     
  15.     self.highlight = function(str) {
  16.       if (self.search() == "") {
  17.         return str;
  18.       }
  19.       else {
  20.         var strSearch = new RegExp("(" + self.search() + ")", "gi");
  21.         var strReplac = '<b style="background:#ffe0ff;">' + "$1" + "</b>";
  22.         return str.replace(strSearch, strReplac);
  23.       }
  24.     }
  25.   }
  26.   
  27.   $(document).ready(function () {
  28.     ko.applyBindings(new viewModel());
  29.   });
  30. </script>
  31. <style type="text/css">
  32.   .ko001 {
  33.     padding:20px 10px;
  34.   }
  35.   .ko001 h2{
  36.     margin:0;
  37.   }
  38.   .ko001 .ko001A{
  39.     background-color:#f6f6f6;
  40.     border:1px solid #ccc;
  41.     padding:20px 10px;
  42.     margin-top:10px;
  43.   }
  44.   .ko001 p{
  45.     margin:10px 0 0;
  46.   }
  47. </style>
  48. </head>
  49. <body>
  50. <h1>特定の文字を装飾したい</h1>
  51. <div class="ko001">
  52.   <h2>「<span data-bind="text: viewTxt"></span>」の「<span data-bind="text: search"></span>」を装飾して表示</h2>
  53.   <div data-bind="html: $root.highlight($root.viewTxt())" class="ko001A"></div>
  54.   <p>※使用用途としては、検索結果から検索した文字列を強調表示したいとか。</p>
  55. </div>
  56. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  57. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  58. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  59. </div>
  60. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  61. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  62. </div>
  63. </body>
  64. </html>