Question

Hi stackoverflow‘ers. I want to create like a text parser with jQuery. What I want is to create a function, in order to pass a string and convert it.

Let’s say I have a div with the following HTML code:

<div class="item">
    [styled] //The "command" in order to process. If not, return false;
        [code1]Text1[/code1]
        Text2
        [code3]Text3[/code3]
    [/styled]
</div>  

I want to do this in jQuery

$(".item").html(my_decode($(this).html());

And change ‘div.item’ innerHTML to

<div class="item">
    <span class="styled">
        <span class="code1">Text1</span>
        Text2
        <span class="code3">Text3</span>
    </span>
</div>

As you can see, it checks for [styled], and if it exists, creates a <span> with class “styled”. And each other [], create a `<span> with the class of the content.

[a]1[/a] [2]a[/2] => <span class="a">1</span> <span class="2">a</span>

Thanks!

Answer 1

I’d suggest you look at an open-source parser such as Jison, and get ideas from it. Then you can create your own solution and learn a lot from the experience.

Good luck!