特定の文字を装飾したい4 - カスタムバインディングを使う

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>特定の文字を装飾したい4 - カスタムバインディングを使う</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.   ko.bindingHandlers.koDecoChange = {
  10.     update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
  11.       var value = valueAccessor();
  12.       var valueUnwrapped = ko.utils.unwrapObservable(value);
  13.       
  14.       var allBindings = allBindingsAccessor();
  15.       var koDecoWord = allBindings.koDecoWord();
  16.       
  17.       var repText = "";
  18.       if (koDecoWord == "") {
  19.         repText = value;
  20.       }
  21.       else {
  22.         var strSearch = new RegExp("(" + koDecoWord + ")", "gi");
  23.         var strReplac = '<b style="background:#ffe0ff;">' + "$1" + "</b>";
  24.         repText = valueUnwrapped.replace(strSearch, strReplac);
  25.       }
  26.       
  27.       element.innerHTML = repText;
  28.     }
  29.   };
  30.   
  31.   function viewModel() {
  32.     var self = this;
  33.     
  34.     self.viewTxt = ko.observable("丸ごとシマウマ");
  35.     self.search = ko.observable("シマウマ");
  36.   }
  37.   
  38.   $(document).ready(function () {
  39.     ko.applyBindings(new viewModel());
  40.   });
  41. </script>
  42. <style type="text/css">
  43.   .ko001 {
  44.     padding:20px 10px;
  45.   }
  46.   .ko001 h2{
  47.     margin:10px 0 0;
  48.   }
  49.   .ko001 .ko001A{
  50.     background-color:#f6f6f6;
  51.     border:1px solid #ccc;
  52.     padding:20px 10px;
  53.     margin-top:10px;
  54.   }
  55.   .ko001 p{
  56.     margin:10px 0 0;
  57.   }
  58.   .ko001 .iptWrap{
  59.     margin:1em 0.5em 0;
  60.   }
  61.   .ko001 .iptWrap dt{
  62.     font-weight:bold;
  63.     margin-top:5px;
  64.   }
  65.   .ko001 .iptWrap dd{
  66.     padding:5px 0;
  67.     margin:0 0 0 1em;
  68.   }
  69. </style>
  70. </head>
  71. <body>
  72. <h1>特定の文字を装飾したい4 - カスタムバインディングを使う</h1>
  73. <div class="ko001">
  74.   <h2>対象データ</h2>
  75.   <dl class="iptWrap">
  76.     <dt>元の文字列</dt>
  77.     <dd><textarea data-bind="value: viewTxt" style="width:300px;height:4em;"></textarea></dd>
  78.     <dt>置換え対象の文字列</dt>
  79.     <dd><input type="text" data-bind="value: search" style="width:300px;" /></dd>
  80.   </dl>
  81.   
  82.   <h2>「<span data-bind="text: viewTxt"></span>」の「<span data-bind="text: search"></span>」を装飾して表示</h2>
  83.   <div data-bind="koDecoChange: viewTxt, koDecoWord: search" class="ko001A"></div>
  84.   <p>※使用用途としては、検索結果から検索した文字列を強調表示したいとか。</p>
  85. </div>
  86. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  87. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  88. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  89. </div>
  90. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  91. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  92. </div>
  93. </body>
  94. </html>