Handle slicing and formatting strings with regex and Vue

Question

I have an issue when code vue, with string:

しらべよう、まとめよう　≪A≫[B]きものの　≪C≫[D]≪E≫[F]

I need processing to be able to render something like this:

the text above will be the text inside []. then the bottom will start with the letter inside ≪≫, and finally the remaining letter.

...(if have)
 <ruby>B
   <rt>A</rt>
 </ruby>
... (if have)
<ruby>D
 <rt>C</rt>
</ruby>
... (if have)

https://codepen.io/AkiraGosho/pen/NWaNNrZ?editors=1111

This is my demo, but I only got 1 letter, so I don't know how to satisfy the problem

Thank you very much.

Titus · Accepted Answer · 2021-12-08 04:08:42Z

4

You can do this using .replace, here is an example:

const input = 'しらべよう、まとめよう　≪A≫[B]きものの　≪C≫[D]≪E≫[F]'
const output = input.replace(/([^≪]*)≪(.)≫[^\[]*\[(.)\]/g, '$1\n<ruby>$3\n\t<rt>$2</rt>\n</ruby>\n');
console.log(output);

What this does, is to use a regex that splits the input into groups, the first group ([^≪]*) selects any character that is not a ≪ fallowed by ≪, then, the second group (.) selects a character preceded by ≪ and fallowed by ≫. The third group uses the same logic but instead of using ≪ and ≫, it uses [ and ].

answered Dec 8, 2021 at 4:08

Titus

22.6k1 gold badge26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cena Over a year ago

great, thank you so much but there will be a case if there is more than 1 character in [] or <<>>, will it get it, how will I handle it in this case?

Titus Over a year ago

@CngtyCphnTponSovico It won't because I've used (.) which only matches one character. To do that, you can replace (.) with ([^≫]+) for the first case and ([^\]]+) for the second.

Collectives™ on Stack Overflow

Handle slicing and formatting strings with regex and Vue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related