Include certain tags to the content within the text apart from using bbcode tags

Question

Include certain tags to the content within the text apart from using bbcode tags

I need help with a project involving a BBCODE editor that can switch between a WYSIWYG editor and a code editor.

The visual editor is designed with a drag-and-drop block system for elements like pictures and text.

In the visual editor, when a user drags a new text block, the content is automatically placed between [text][/text] tags.

In the code editor, users can freely write text without [text][/text] tags.

To seamlessly switch between the two editors, free text needs to be enclosed in [text][/text] tags in the code editor.

For example:

If I write text and bbcode in the code editor:

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

If I switch to the visual editor, the free text must be enclosed in [text][/text] tags like this:

[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]

I'm considering two approaches:

Splitting text and bbcode using loops, then reconstructing the code with another set of loops.
Using regex to extract free text and replace it accordingly.

Which method do you think is better? Is it feasible to add the tags using regex?

Thank you, Thomas

javascript regex parsing bbcode

Answer 1

Answer №1

Give this a shot:

const regex = /(\[(img|\w{4,})\][\s\S]*?\[\/\2\])(\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) {
    if (m.index === regex.lastIndex) { regex.lastIndex++; }

   
    if (typeof m[1] != 'undefined') {
        outstr += m[1] + m[3];
    }
    else {
        outstr += '[text]' + m[4] + '[/text]' + m[5];
    }
}
console.log(outstr);

The regex uses the first capturing group to handle structural tags and the second group for remaining data. If the first group has data, it's an opening or closing tag which is accumulated. If not, it's text content wrapped in [text] tags.

Capturing groups 3 and 5 account for new lines when present.

The second capturing group ensures matching opening and closing tags.

See demo on regex101

Regex breakdown:

   # First option: Structural tag ([image]...[/image]
   ( # Capture group one
     \[ # Literal '['
       (img|\w{4,}) # img tag or tag with 4+ letters (all structural tags)
     \] # Literal ']'
     [\s\S]*? # Any character 0+ times, ungreedy
     \[\/\2\] # Closing tag. Word matches opening tag
   )(\n?) # Optional new line as third capture group

   # Second option: Other text
 | ([\s\S]+?) # Any character 1+ times, ungreedy. Fourth capture group
   (\n?)      # Optional new line, not included in previous group
   (?=         # Lookahead. Following condition must be met (not matched)
        $       # End of line 
      | \[(?:img|\w{4,})\] # Opening structural tag
   )

Answer 2

Give this a shot:

const regex = /(\[(img|\w{4,})\][\s\S]*?\[\/\2\])(\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) {
    if (m.index === regex.lastIndex) { regex.lastIndex++; }

   
    if (typeof m[1] != 'undefined') {
        outstr += m[1] + m[3];
    }
    else {
        outstr += '[text]' + m[4] + '[/text]' + m[5];
    }
}
console.log(outstr);

The regex uses the first capturing group to handle structural tags and the second group for remaining data. If the first group has data, it's an opening or closing tag which is accumulated. If not, it's text content wrapped in [text] tags.

Capturing groups 3 and 5 account for new lines when present.

The second capturing group ensures matching opening and closing tags.

See demo on regex101

Regex breakdown:

   # First option: Structural tag ([image]...[/image]
   ( # Capture group one
     \[ # Literal '['
       (img|\w{4,}) # img tag or tag with 4+ letters (all structural tags)
     \] # Literal ']'
     [\s\S]*? # Any character 0+ times, ungreedy
     \[\/\2\] # Closing tag. Word matches opening tag
   )(\n?) # Optional new line as third capture group

   # Second option: Other text
 | ([\s\S]+?) # Any character 1+ times, ungreedy. Fourth capture group
   (\n?)      # Optional new line, not included in previous group
   (?=         # Lookahead. Following condition must be met (not matched)
        $       # End of line 
      | \[(?:img|\w{4,})\] # Opening structural tag
   )

Include certain tags to the content within the text apart from using bbcode tags

Answer №1

Similar questions

streaming an HTML5 video directly from memory source

Transfer the chosen language from the uib-dropdown language selector to the $scope variable

Switching Profiles in XPages

The React.js Mui Collapse component exclusively triggers animation during the transition while closing, without any animation when expanding

What is causing this code to malfunction in AngularJS version 1.2?

When running through Selenium web driver, JS produces inaccurate results

Implementing an object as a filter in an NG-repeat function

Using Bootstrap4 to merge rows into a single column or apply rowspan in Bootstrap

Tips for implementing the handleClick method within a class component, as opposed to using the export default function syntax in

Tips for preventing the inner surface from appearing transparent in WebGL

The error "Unable to create an instance of mssql.Schema" indicates that the

The Vue.js application is failing to toggle the integrated code

Using React Native's stylesheet to apply multiple values in a CSS statement

How can I dynamically show the corresponding name for a given ID in Django without the need to refresh or submit the form?

Vuex data fails to update upon browser reload in Nuxt SSR

Tips for ensuring a webpage loads at a specific resolution

Receive characteristics in component specification

PHP is returning an empty response during an AJAX request

Checking authentication globally using Vue.js

A Complication Arises with Browser Functionality When Embedding an Iframe within