JavaScript-將CSS標記附加到字符串的特定部分

Question

好吧，假設我有一個文本框，您可以輸入

Sebastian Soria 3'|12' Digano
Nam Tae-Hee 23', 45'|33' Julio Vezbek

而textarea則通過將鼠標移到該區域上來完成，該texarea逐行讀取，每行尋找其分度符“ |”。 然后將其拆分，然后將其分為主場得分手和遠場得分手。

這是一個JS小提琴： http : //jsfiddle.net/cu24k/

我可以很容易地做到這一點，如果它大於10，則將“ XX'”的最后4個字符刮掉，將“ X'”的3個字符刮掉並將其分割並上色/加粗。 但是后來我意識到，如果他們得分不止一次呢？ 這將是23', 45'或更長時間！

所以，我想...如果我能把撇號，逗號，數字和顏色/粗體分開，該怎么辦。

有辦法嗎？

Answer 1

我不是100％知道您要做什么，但是我綜合考慮了您的想法 ： http : //jsfiddle.net/cu24k/1/

這是更新的JS：

 $(document).ready(function () {
     $('.scorers').on('change', function () {

         $("#home_scorers").text("");
         $("#away_scorers").text("");

         var lines = $('.scorers').val().split('\n');
         for (var i = 0; i < lines.length; i++) {
             var split      = lines[i].split('|');
             // get home data
             var home       = split[0];
             var homeIndex  = home.search( /\d+\'/ );
             var homeTeam   = home.substr( 0, homeIndex );
             var homeScore  = home.substr( homeIndex );
             // get away data
             var away       = split[1];
             var awayIndex  = away.lastIndexOf( "'" ) + 1;
             var awayScore   = away.substr( 0, awayIndex );
             var awayTeam  = away.substr( awayIndex );
             // output data
             $("#home_scorers").append(
                 "<div>" + homeTeam +
                 "<b>" + homeScore + "</b>" +
                 "</div>");
             $("#away_scorers").append(
                 "<div>" +
                 "<b>" + awayScore + "</b>" +
                  awayTeam + "</div>");
         }

     });

 });