我在做什么:
- 在NodeJS中,我使用MustacheJS创建了一个电子邮件模板,使用JSON对象数组中的数据
- 模板中的文本/消息可以包含文本以及基本的html标记(如
b
p
和a
) - 由于篇幅有限,我只需要展示一段信息摘录。为此,我进行了单词计数,比如说20个单词(用空格检查)之后,我截断字符串并附加
View more
锚标记。这会将其链接到网站的帖子页面,其中包含完整的帖子。类似于:
嘿,这是一个示例文章文本
<b>message</b>
。Lorem ipsum悲哀坐阿米特。。。<a href="someurl">
查看更多</a>
问题:
在单词计数和截断过程中,我可能会截断html标记之间的字符串,因为我只是根据空间计算单词。类似于:
我正在与您共享一个链接。
<a style="color:
。。。<a href="someurl">
查看更多</a>
现在这将破坏html。
可能的解决方案:
- 在截断字符串之前,请对其运行regex以查找其中的所有html标记
- 使用
indexOf()
(或其他方法)查找每个标签的起始索引和结束索引 - 计算完单词后,在需要截断的地方获取索引
- 现在看看索引是否与任何标记区域相交
- 如果它确实相交,只需将截断索引移动到html标记的开始或结束即可
问题:
有更好的方法吗。我不知道我应该在谷歌上搜索什么搜索词,以获得帮助。
附言:代码很灵活,如果有更好的解决方案,我可以更改流程。另外,我对职称不太在行。如果可以,请将其修改为反映问题的内容。
编辑:
这是亚历克斯回答后我想到的。希望它能帮助其他人:
/**
* 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-你的问题做得很好。我希望更多的问题需要同样多的时间,并提供同样多的细节:)