将标签添加到 bbcode 标签之外的文本中

Question

我有一个无法回答的问题。我写了一个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，并使用另一个循环重建代码。
• 使用正则表达式获取自由文本并替换它。

最好的方法是什么？您认为可以从正则表达式中添加标签吗？

谢谢 托马斯

Answer 1

试试这个：

const regex = /([(img|w{4,})][sS]*?[/2])(n?)|([sS]+?)(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 个捕获组，您有新行(如果存在(

第二个捕获组用于使开始标记和结束标记相等。

正则表达式101演示

正则表达式解释：

# 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 ']'
[sS]*? # Any character 0 or more times, ungreedy
[/2] # Closing tag. Word = same as opening tag
)(n?) # a new line may appear. Save it on third capturing group
# Second option: other text
| ([sS]+?) # 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
)