在 bbcode 标签之外的文本中添加标签
Add tags to the text outside of bbcode tags
我有一个无法回答的问题。我写了一个 BBCODE 编辑器,可以在所见即所得编辑器和代码编辑器之间切换。
可视化编辑器是从拖放块系统(图片、文本...)构建的
在可视化编辑器中,当用户拖动新的文本块时,内容会自动写入 [text][/text]
个标签之间。
在代码编辑器中,用户可以编写没有 [text][/text]
标签的自由文本。
为了能够在两个编辑器之间切换,需要在代码编辑器的 [text][/text]
标签之间添加自由文本。
示例:
我在代码编辑器中编写文本和 bbcode :
Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi
rumoribus et patentes.
[img]https://foo.com/fighters.png[/img]
Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus,
quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia
[img]https://foo.com/fighters1.png[/img]
[img]https://foo.com/fighters2.png[/img]
Utque proeliorum periti rectores [i]primo catervas[/i] densas opponunt et fortes,
deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors
adegerit
如果我切换到可视化编辑器,需要在 [text][/text]
之间添加自由文本,如下所示:
[text]Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi
rumoribus et patentes.[/text]
[img]https://foo.com/fighters.png[/img]
[text]Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus,
quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia[/text]
[img]https://foo.com/fighters1.png[/img]
[img]https://foo.com/fighters2.png[/img]
[text]Utque proeliorum periti rectores [i]primo catervas[/i] densas opponunt et fortes,
deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors
adegerit[/text]
我觉得有两种方式:
- 用循环拆分文本和 bbcode,并用另一个循环重建代码。
- 使用正则表达式获取自由文本并替换它。
最好的方法是什么?您认为可以从正则表达式添加标签吗?
谢谢,
托马斯
试试这个:
const regex = /(\[(img|\w{4,})\][\s\S]*?\[\/\])(\n?)|([\s\S]+?)(\n?)(?=$|\[(?:img|\w{4,})\])/gi;
let str = `
Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi
rumoribus et patentes.
[image]https://foo.com/fighters.png[/image]
Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus,
quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia
[image]https://foo.com/fighters1.png[/image]
[image]https://foo.com/fighters2.png[/image]
Utque proeliorum periti rectores [i]primo catervas[/i] densas opponunt et fortes,
deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors
adegerit`;
let m;
let outstr = '';
while ((m = regex.exec(str)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) { regex.lastIndex++; }
// The result can be accessed through the `m`-variable.
// m[1] == structure tags
// m[4] == text content
// m[3] nad m[5] are new lines (if present)
if (typeof m[1] != 'undefined') {
outstr += m[1] + m[3];
}
else {
outstr += '[text]' + m[4] + '[/text]' + m[5];
}
}
console.log(outstr);
在正则表达式中,您使用第一个捕获组来去除结构标签。第二组用于其余数据。如果第一组有数据,则意味着我们找到了结构标签。我们只是积累它。如果不是,则表示它是文本。所以我们用新的[text]
标签
积累它
最后,在第 3 和第 5 个捕获组中有新行(如果存在)
第二个捕获组用于使开始和结束标记相等。
正则表达式解释:
# First option: an structural tag ([image]...[/image]
( # First capturing group
\[ # Literal '['
(img|\w{4,}) # img tag or tag with 4 or more letters (all structural tags)
\] # Literal ']'
[\s\S]*? # Any character 0 or more times, ungreedy
\[\/\] # Closing tag. Word = same as opening tag
)(\n?) # a new line may appear. Save it on third capturing group
# Second option: other text
| ([\s\S]+?) # Any character 1 or more times, ungreedy. Third capturing group
(\n?) # A new line may appear, Don't want it on the previous group
(?= # Lookahead. The following must appear (but we don't match it)
$ # Either end of line
| \[(?:img|\w{4,})\] # or some opening structural tag
)
我有一个无法回答的问题。我写了一个 BBCODE 编辑器,可以在所见即所得编辑器和代码编辑器之间切换。
可视化编辑器是从拖放块系统(图片、文本...)构建的
在可视化编辑器中,当用户拖动新的文本块时,内容会自动写入 [text][/text]
个标签之间。
在代码编辑器中,用户可以编写没有 [text][/text]
标签的自由文本。
为了能够在两个编辑器之间切换,需要在代码编辑器的 [text][/text]
标签之间添加自由文本。
示例:
我在代码编辑器中编写文本和 bbcode :
Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi
rumoribus et patentes.
[img]https://foo.com/fighters.png[/img]
Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus,
quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia
[img]https://foo.com/fighters1.png[/img]
[img]https://foo.com/fighters2.png[/img]
Utque proeliorum periti rectores [i]primo catervas[/i] densas opponunt et fortes,
deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors
adegerit
如果我切换到可视化编辑器,需要在 [text][/text]
之间添加自由文本,如下所示:
[text]Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi
rumoribus et patentes.[/text]
[img]https://foo.com/fighters.png[/img]
[text]Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus,
quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia[/text]
[img]https://foo.com/fighters1.png[/img]
[img]https://foo.com/fighters2.png[/img]
[text]Utque proeliorum periti rectores [i]primo catervas[/i] densas opponunt et fortes,
deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors
adegerit[/text]
我觉得有两种方式:
- 用循环拆分文本和 bbcode,并用另一个循环重建代码。
- 使用正则表达式获取自由文本并替换它。
最好的方法是什么?您认为可以从正则表达式添加标签吗?
谢谢, 托马斯
试试这个:
const regex = /(\[(img|\w{4,})\][\s\S]*?\[\/\])(\n?)|([\s\S]+?)(\n?)(?=$|\[(?:img|\w{4,})\])/gi;
let str = `
Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi
rumoribus et patentes.
[image]https://foo.com/fighters.png[/image]
Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus,
quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia
[image]https://foo.com/fighters1.png[/image]
[image]https://foo.com/fighters2.png[/image]
Utque proeliorum periti rectores [i]primo catervas[/i] densas opponunt et fortes,
deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors
adegerit`;
let m;
let outstr = '';
while ((m = regex.exec(str)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) { regex.lastIndex++; }
// The result can be accessed through the `m`-variable.
// m[1] == structure tags
// m[4] == text content
// m[3] nad m[5] are new lines (if present)
if (typeof m[1] != 'undefined') {
outstr += m[1] + m[3];
}
else {
outstr += '[text]' + m[4] + '[/text]' + m[5];
}
}
console.log(outstr);
在正则表达式中,您使用第一个捕获组来去除结构标签。第二组用于其余数据。如果第一组有数据,则意味着我们找到了结构标签。我们只是积累它。如果不是,则表示它是文本。所以我们用新的[text]
标签
最后,在第 3 和第 5 个捕获组中有新行(如果存在)
第二个捕获组用于使开始和结束标记相等。
正则表达式解释:
# First option: an structural tag ([image]...[/image]
( # First capturing group
\[ # Literal '['
(img|\w{4,}) # img tag or tag with 4 or more letters (all structural tags)
\] # Literal ']'
[\s\S]*? # Any character 0 or more times, ungreedy
\[\/\] # Closing tag. Word = same as opening tag
)(\n?) # a new line may appear. Save it on third capturing group
# Second option: other text
| ([\s\S]+?) # Any character 1 or more times, ungreedy. Third capturing group
(\n?) # A new line may appear, Don't want it on the previous group
(?= # Lookahead. The following must appear (but we don't match it)
$ # Either end of line
| \[(?:img|\w{4,})\] # or some opening structural tag
)