Надеюсь, все хорошо.форматирование текста в javascript
Мне было интересно, может ли кто-нибудь помочь мне. У меня есть следующая функция javascript, которую я пытаюсь применить к div, вложенному в представление списка.
Моя Javascript функция:
function viewPost(val1) {
var msg = val1.innerHTML;
console.log(msg);
// disable <and> to prevent scripting attacks
msg = msg.replace(/\</gi, "<");
msg = msg.replace(/\>/gi, ">");
// 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 для форматирования его текста.
[ 'HTMLCollection.item'] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) является функция. Вам нужны круглые скобки для вызова функции: 'viewPost (divs.item (i));' или без метода item: 'viewPost (divs [i]);'. – Teemu