2015-11-27 3 views
2

Надеюсь, все хорошо.форматирование текста в javascript

Мне было интересно, может ли кто-нибудь помочь мне. У меня есть следующая функция javascript, которую я пытаюсь применить к div, вложенному в представление списка.

Моя Javascript функция:

function viewPost(val1) { 


var msg = val1.innerHTML; 
console.log(msg); 

    // disable <and> to prevent scripting attacks 
    msg = msg.replace(/\</gi, "&lt;"); 
    msg = msg.replace(/\>/gi, "&gt;"); 

    // preserve new lines 
    msg = msg.replace(/\n/gi, "<br />"); 

    // Basic BBCodes. 

    // head large 
    msg = msg.replace(/\[hdlg\]/gi, '<h1>'); 
    msg = msg.replace(/\[\/hdlg\]/gi, '</h1>'); 
    // head medium 
    msg = msg.replace(/\[hdmd\]/gi, '<h2>'); 
    msg = msg.replace(/\[\/hdmd\]/gi, '</h2>'); 
    // head small 
    msg = msg.replace(/\[hdsm\]/gi, '<h3>'); 
    msg = msg.replace(/\[\/hdsm\]/gi, '</h3>'); 
    // bold text 
    msg = msg.replace(/\[b\]/gi, "<strong>"); 
    msg = msg.replace(/\[\/b\]/gi, "</strong>"); 
    // italic text 
    msg = msg.replace(/\[i\]/gi, "<em>"); 
    msg = msg.replace(/\[\/i\]/gi, "</em>"); 
    // underlined text 
    msg = msg.replace(/\[u\]/gi, "<u>"); 
    msg = msg.replace(/\[\/u\]/gi, "</u>"); 
    // centre text 
    msg = msg.replace(/\[c\]/gi, '<p style="text-align:center;">'); 
    msg = msg.replace(/\[\/c\]/gi, "</p>"); 
    // left align text 
    msg = msg.replace(/\[l\]/gi, '<p style="text-align:left;">'); 
    msg = msg.replace(/\[\/l\]/gi, "</p>"); 
    // right align text 
    msg = msg.replace(/\[r\]/gi, '<p style="text-align:right;">'); 
    msg = msg.replace(/\[\/r\]/gi, "</p>"); 
    // justify text 
    msg = msg.replace(/\[j\]/gi, '<p style="text-align:justify;">'); 
    msg = msg.replace(/\[\/j\]/gi, "</p>"); 
    // code blocks 
    msg = msg.replace(/\[code\]/gi, '<div style="background:#484848;color:#ffffff;text-align:left;border-radius:8px;padding:10px;">'); 
    msg = msg.replace(/\[\/code\]/gi, '</div>'); 
    // def lists 
    msg = msg.replace(/\[def\]/gi, '<dl>'); 
    msg = msg.replace(/\[\/def\]/gi, '</dl>'); 
    // def term 
    msg = msg.replace(/\[term\]/gi, '<dt>'); 
    msg = msg.replace(/\[\/term\]/gi, '</dt>'); 
    // def description 
    msg = msg.replace(/\[desc\]/gi, '<dd>'); 
    msg = msg.replace(/\[\/desc\]/gi, '</dd>'); 
    // unordered list 
    msg = msg.replace(/\[unord\]/gi, '<ul>'); 
    msg = msg.replace(/\[\/unord\]/gi, '</ul>'); 
    // ordered list 
    msg = msg.replace(/\[ord\]/gi, '<ol>'); 
    msg = msg.replace(/\[\/ord\]/gi, '</ol>'); 
    // list item 
    msg = msg.replace(/\[item\]/gi, '<li>'); 
    msg = msg.replace(/\[\/item\]/gi, '</li>'); 
    // links 
    msg = msg.replace(/\[url=(.*?)\](.*?)/gi, '<a href="$1" target="_blank">$2'); 
    msg = msg.replace(/\[\/url\]/gi, '</a>'); 
    // images 
    msg = msg.replace(/\[postpic=(.*?)\sclass=(.*?)\stitle=(.*?)\salt=(.*?)\sstyle=(.*?)\]/gi, '<img src="/images/postAssets/$1" class="$2" title="$3" alt="$4" style="$5" />'); 
    msg = msg.replace(/\[\/postpic\]/gi, ""); 
    // font colour [colour=COL] [/colour] 
    msg = msg.replace(/\[colour=(.*?)\]/gi, '<span style="color:$1;">'); 
    msg = msg.replace(/\[\/colour\]/gi, '</span>'); 
    // tables 
    msg = msg.replace(/\[table\]/gi, '<table style="padding: 5px;">'); 
    msg = msg.replace(/\[\/table\]/gi, '</table>'); 
    // table row 
    msg = msg.replace(/\[trow\]/gi, '<tr style="border:1px solid #000000;">'); 
    msg = msg.replace(/\[\/trow\]/gi, '</tr>'); 
    // table header 
    msg = msg.replace(/\[thead\]/gi, '<th style="padding: 5px;">'); 
    msg = msg.replace(/\[\/thead\]/gi, '</th>'); 
    // table data 
    msg = msg.replace(/\[tdata\]/gi, '<td style="padding: 5px;">'); 
    msg = msg.replace(/\[\/tdata\]/gi, '</td>'); 
    // subscript 
    msg = msg.replace(/\[sub\]/gi, '<sub>'); 
    msg = msg.replace(/\[\/sub\]/gi, '</sub>'); 
    // superscript 
    msg = msg.replace(/\[sup\]/gi, '<sup>'); 
    msg = msg.replace(/\[\/sup\]/gi, '</sup>'); 

    val1.innerHTML = msg; 

    console.log(val1.innerHTML); 


} 

вызвать эту функцию у меня есть на странице следующий JavaScript:

$(document).ready(function() { 
var divs = document.getElementsByClassName("displayBox"); 
    for (var i = 0; i < divs.length; i++) { 
     viewPost(divs.item[i]); 
    } 


    }); 

Мой asp.net ListView:

<asp:ListView ID="lstPosts" runat="server" ItemPlaceholderID="itemPlaceholder" GroupItemCount="3" GroupPlaceholderID="groupPlaceholder" OnPagePropertiesChanging="lstPosts_PagePropertiesChanging"> 
      <EmptyDataTemplate> 
       <div> 
        <p>No data was returned.</p> 
       </div> 
      </EmptyDataTemplate> 

      <GroupTemplate> 
       <div class="row"> 
        <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> 
       </div> 
      </GroupTemplate> 
      <ItemTemplate> 

       <a id="postLink" href='<%#: GetRouteUrl("BlogPostRoute", new {postid = Eval("postID")}) %>'> 
        <div id="lstBox" class="col-sm-4"> 
         <div class="row"> 
          <div class="col-sm-12"> 
           <h2><%# Eval("PostTitle") %></h2> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-sm-12"> 


           <div class="displayBox"><%# Eval("PostContent") %></div> 

          </div> 
         </div> 
        </div> 
       </a> 

      </ItemTemplate> 
      <LayoutTemplate> 
       <div class="row"> 
        <div id="groupPlaceholderContainer" runat="server" style="width: 100%"> 
         <asp:PlaceHolder ID="groupPlaceholder" runat="server" /> 
        </div> 
       </div> 
       <div class="row"> 
        <asp:DataPager ID="DataPager1" runat="server" PagedControlID="lstPosts" PageSize="12"> 

         <Fields> 

          <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true" 
           ShowNextPageButton="false" /> 

          <asp:NumericPagerField ButtonType="Link" /> 

          <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false" ShowPreviousPageButton="false" /> 

         </Fields> 

        </asp:DataPager> 
       </div> 
      </LayoutTemplate> 
     </asp:ListView> 

Не уверен, что я делаю не так, или, если на то пошло. любая помощь была бы потрясающей. Функция должна форматировать текст, как определено регулярным выражением. На данный момент он не может найти div для форматирования его текста.

+0

[ 'HTMLCollection.item'] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) является функция. Вам нужны круглые скобки для вызова функции: 'viewPost (divs.item (i));' или без метода item: 'viewPost (divs [i]);'. – Teemu

ответ

0

Изменить код из divs.item[i] в: divs[i]

$(document).ready(function() { 
var divs = document.getElementsByClassName("displayBox"); 
for (var i = 0; i < divs.length; i++) { 
    viewPost(divs[i]); 
} 


}); 
Смежные вопросы