我在做什么:
b
p
&a
)。View more
定位标记。这会将其链接到网站的帖子页面,其中包含完整的帖子。就像是:嘿,这是一个示例帖子文本
<b>message</b>
。Lorem存有悲坐艾米特......<a href="someurl">
查看更多</a>
问题:
在单词计数和截断期间,可能会截断html标记之间的字符串,因为我只是根据空间来计算单词。就像是:
我正在与您分享链接。
<a style="color:
...<a href="someurl">
查看更多</a>
现在,这将破坏html。
可能的解决方案:
indexOf()
(或其他方法)查找每个标签的开始和结束索引。问题:
有一个更好的方法吗。我不知道我应该在Google上搜索哪些搜索字词,以获取有关此方面的帮助。
PS该代码是灵活的,如果有更好的解决方案,我可以更改流程。另外,我对职位的称呼也不好。如果可以,请将其修改为反映问题的内容。
编辑:
这是亚历克斯回答后我想到的。希望它可以帮助其他人:
/**
* Counter: Takes a string and returns words and characters count
* @param value
* @returns obj: {
* 'wordCount': (int),
* 'totalChars': (int),
* 'charCount': (int),
* 'charCountNoSpace': (int)
* }
*/
var counter = function(value){
var regex = /\s+/gi;
if (!value.length) {
return {
wordCount: 0,
totalChars: 0,
charCount: 0,
charCountNoSpace: 0
};
}
else {
return {
wordCount: value.trim().replace(regex, ' ').split(' ').length,
totalChars: value.length,
charCount: value.trim().length,
charCountNoSpace: value.replace(regex, '').length
};
}
}
/**
* htmlSubString - Creates excerpt from markup(or even plain text) without creating malformed HTML tags
* @param markup {string} - Markup/text to take excerpt out of
* @param limit {int} - Total word count of excerpt. Note that only text (not the html tag) counts as a valid word.
* @returns {string} - Excerpt
*/
var htmlSubString = function(markup, limit){
var htmlParser = require("htmlparser2");
var tagCount = 0;
var wordCount = 0;
var excerpt = '';
function addToExcerpt(type, text, attribs) {
if ((wordCount >= limit && tagCount == 0) || (tagCount === 1 && type === 'tagOpen' && wordCount >= limit)) {
return false;
}
else if (wordCount < limit || tagCount) {
if (type === 'text') {
var wordCountSubString = $scope.counter(text).wordCount;
if (wordCountSubString + wordCount > limit && tagCount === 0) {
var length = limit - wordCount;
var wordList = text.trim().split(' ');
for (var i = 0; i < length; i++) {
excerpt += ' ' + wordList[i];
wordCount++;
}
} else {
wordCount += wordCountSubString;
excerpt += text;
}
} else if (type === 'tagOpen') {
excerpt += '<' + text;
for (var prop in attribs) {
excerpt += ' ' + prop + '="' + attribs[prop] + '"';
}
excerpt += '>';
} else if (type === 'tagClose') {
excerpt += '</' + text + '>';
}
}
return true;
}
var parser = new htmlParser.Parser({
onopentag: function (name, attribs) {
if(wordCount < limit){
++tagCount;
addToExcerpt('tagOpen', name, attribs);
}
},
ontext: function (text) {
if(wordCount < limit){
addToExcerpt('text', text);
}
},
onclosetag: function (tagName) {
if(wordCount < limit || tagCount > 0){
addToExcerpt('tagClose', tagName);
--tagCount;
}
}
});
parser.write(markup);
parser.end();
return excerpt;
}
用法:
var wordCountLimit = 20;
var markup = "/* some markup/text */";
var excerpt = htmlSubString(markup, wordCountLimit);
现在,您肯定可以找到一些匹配正则表达式的HTML标记。就是说,我不建议这样做。起初,您会很高兴,并且一切都会正常进行。然后明天您会发现一个小的情况。“不用担心!” 您会说,当您修改表达式以解决差异时。然后第二天,进行一次新的调整,再进行一次新调整,等等,直到您再也无法接受为止。
我强烈建议您找到一个已经建立的HTML解析库。npm上似乎有很多。这似乎很受欢迎。
PS-您的问题做得很好。我希望有更多的问题能花更多的时间并提供更多的细节:)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句