【发布时间】:2019-12-12 14:47:26
【问题描述】:
我们需要处理一个“字符串”并用<strong></strong>包围'*'和'**'之间的所有文本,类似地用<code> </code>包围backTic之间的文本。现在我已经编写了逻辑,它也可以正常工作,但我确信,必须有更好的方法,因为对于这个简单的字符串处理任务来说代码太多了。以下是我的代码。感谢任何建议。
输入 = "*within single star* and **within double start** and this is `backtick string`"
输出 = "<strong>within single star</strong> and <strong>within double start</strong> and this is <code>backtick string</code>"
transform(data: any) {
if (data) {
const processDblStar = (input) => {
const regExforDoubleStar = /(\*\*)+/gi;
let i = 0;
const result = input.replace(regExforDoubleStar, (match, matchedStr, offset) => {
i++;
return i % 2 === 0 ? '</strong>' : '<strong>';
});
return result;
};
const processSingleStar = (input) => {
const regExforSingleStar = /(\*)+/gi;
let i = 0;
const result = input.replace(regExforSingleStar, (match, matchedStr, offset) => {
i++;
return i % 2 === 0 ? '</strong>' : '<strong>';
});
return result;
};
const processBackTick = (input) => {
const regExforBackTick = /(\`)+/gi;
let i = 0;
const result = input.replace(regExforBackTick, (match, matchedStr, offset) => {
i++;
return i % 2 === 0 ? '</code>' : '<code>';
});
return result;
};
const processPipeline = (functions) => (inputStr) => functions.reduce((result, fn) => fn(result), inputStr);
const funcArr: Function[] = [];
if (data.indexOf('`') >= 0) {
funcArr.push(processBackTick);
}
if (data.indexOf('*') >= 0) {
funcArr.push(processSingleStar);
}
if (data.indexOf('**') >= 0) {
funcArr.push(processDblStar);
}
processPipeline(funcArr)(data);
}
}
【问题讨论】:
-
动态 html 有点棘手,我会研究作为 JS 一部分的
render函数,这似乎是一种更惯用的方式,然后从标准函数返回 html -
看来你想实现 Markdown 语法。为什么不使用现有的 Markdown 解析器之一?
-
@Amadan 我没有使用 Markdown 解析器,但正如你指出的那样,我会调查它。感谢您的意见。
-
您可以按照@Amadan 的建议使用 Markdown,只启用您描述的功能子集:github.com/markedjs/marked/pull/660
标签: javascript typescript ecmascript-6 ecmascript-2016