ng-bind-html獲取html內容的首字母

Question

我遇到了使用ng-bind-html進行html綁定的情況。 我想獲得html內容的第一個字符（不包括html標簽）。 以下是我的示例代碼。

<span class="first-letter">{{firstLetter}}</span>
            <div id="myDiv" ng-CLoak data-ng-bind-html="trustAsHtml(data.ContentDescription)" class="{{currentFont}}"></div>

我的html字符串如下所示

<p><span>hii my content</span></p>
the starting and ending tags are un predictable.

我想得到第一個字母“ h”而不是“ <”，謝謝。

Answer 1

您可以使用textContent屬性讓瀏覽器為您剝離HTML

function strip(html)
{
   var tmp = document.createElement("DIV");
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
}

而且由於您只對第一個字母感興趣，因此您可能不需要ng-bind-html :)

如果要突出顯示第一個字母，請使用CSS：第一字母https://developer.mozilla.org/zh-CN/docs/Web/CSS/%3A%3Afirst-letter

Answer 2

您可以刪除HTML標簽，就像在數組中那樣簡單地訪問第一個字母。

var regex = /(<([^>]+)>)/ig
,   body = "<p><span>hii my content</span></p>"
,   result = body.replace(regex, "");
console.log(result[0]);

使用jQuery

console.log($('<p><span>hii my content</span></p>').text()[0]);

它會給你“ h”

Answer 3

如果你有競爭

<p class="first-letter"><span>hii my content</span></p>

然后

$(".first-letter").text().substring(0,1)

無論類中有多少層嵌套，都會返回您的第一個字母。