gpt4 book ai didi

javascript - 如何在不创建格式错误的 HTML 标签的情况下分解字符串?

转载 作者:太空宇宙 更新时间:2023-11-04 00:56:47 25 4
gpt4 key购买 nike

我在做什么:

  • 在 NodeJS 中,我使用 MustacheJS 使用 JSON 对象数组中的数据创建电子邮件模板。
  • 模板中的文本/消息可以包含文本和基本 html 标记(例如 b pa )。
  • 由于空间有限,我只需显示消息的摘录。为此,我进行了字数统计,在说 20 个单词(通过空格检查)后,我 chop 字符串并附加 View more anchor 标记。这会将其链接到网站的帖子页面,其中包含完整的帖子。比如:

Hey this is a sample post text <b>message</b>. Lorem ipsum dolor sit amit... <a href="someurl">View more</a>

问题:

在字数统计和 chop 期间,我可能会 chop html 标记之间的字符串,因为我只是根据空间计算字数。像这样的东西:

I am sharing a link with you. <a style="color:... <a href="someurl">View more</a>

现在这会破坏 html。

可能的解决方案:

  • 在 chop 字符串之前,对其运行正则表达式以查找其中的所有 html 标签。
  • 使用indexOf() (或其他方法)查找每个标签的开始和结束索引。
  • 字数统计后,获取需要 chop 的索引。
  • 现在查看索引是否与任何标记区域相交。
  • 如果确实相交,只需将 chop 索引移动到 html 标记的开头或结尾即可。

问题:

有没有更好的方法来做到这一点。我不知道应该在 Google 上搜索哪些搜索词才能获得相关帮助。

附注该代码很灵活,如果有明显更好的解决方案,我可以更改流程。另外,我不擅长帖子标题。如果可以的话,请将其修改为反射(reflect)问题的内容。

<小时/>

编辑:

这是我在 Alex 回答后想到的。希望它对其他人有帮助:

/**
* 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 上好像有不少。 This one看来相当受欢迎。

PS - 你的问题回答得很好。我希望更多的问题能花同样多的时间并提供尽可能多的细节:)

关于javascript - 如何在不创建格式错误的 HTML 标签的情况下分解字符串?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29423229/

25 4 0