Codepal

We develop enthralling web experiences.

Listify - Convert Raw Text To li / option elements

Listify, Convert Raw Text To HTML Elements

Listify is a tool I created using C for my own use. Then thought of converting it into an online tool. It helps you convert those long list of text to HTML entities like <li> and <option> elements.

Listify Chrome Extension Plugin

Live Demo

What is Listify?

Listify is a very simple free service for web developers and designers, which allows you to convert raw text to html’s ‘list’ or ‘option’ elements by choosing various options like delimiter, type of lists and ignoring digits. I got this idea when I was working on the Clinova project. I had to insert the names of all the countries in the landing page of the site. To do that, I had to insert all the names within a <select> tag. You can very well understand the kind of time that would have been wasted doing it manually. So I went ahead and wrote a short piece of code in C, which would accept a text file with the country names and generate another text file with the <select> tags appended to the names. It saved a great amount of time which I utilized to do something else (I most probably saw an episode from How I Met Your Mother). Anyway, so when I started with Codeigniter, I thought, rather than wasting my time on creating a demo useless project, why not convert that C program to an online tool. Hence, came Listify. This is still in Alpha stage and we would love to hear some suggestions for new features that you would like. Drop us a feedback here feedback@code-pal.com or leave a comment here.

How will it help?

Using listify you can speed up your HTML coding process when you need to include large lists or option elements in your code. For example, if you require option elements like country names, then you would have to add the tags to 257 names, which obviously will take some time. Using Listify, it would take just three seconds.

Listify Paste text on text box preview
Listify Paste text on text box preview

How to use it?

Using Listify is pretty easy. All you have to do is paste the text in the text box above, configure your options as per your requirements and just click on the generate button. You can place any raw text and choose a delimiter to divide it into the list / option elements. Basically, it involves three steps to generete list via Listify:

  • Copy text from your desired source and paste it in the text box.
  • Paste it in the text box, configure the options.
  • Copy the generated list from the dialog box, paste it in your code

Now you can utilise your saved time the way you want to :)

What are these options?

List Type This option enables you to choose what kind of list you want generated. Whether it is a list element  for an unordered / ordered list or an option element <option> element for the <select> tag. Ignore Digits Many a times there are unwanted numerical digits present in the text which we do not want to be included in the list / option item. This option enables generating the list ignoring the digits present in the text. For example, if you want to convert a numbered list to an unordered list, then just copy the list, select this option and the list items will be generated without the numbers.

Delimiterdelimiter is a sequence of one or more characters used to specify the boundary between separate, independent regions in the text you want to be converted. It means that how you want your text to be divided into the list elements. For example, if a text is a,b,c and the delimiter is , then the list will be generated as<li>a</li><li>b</li><li>c</li> By default, if no delimiter is entered then it will consider “return” or “new line” as the delimiter. For space as a delimiter, you need to enter space etc.

How to choose a delimiter
After choosing a delimiter

Let me know if it was useful and feedback for improvements and bugs are most welcome.

Recent Updates:

Updates on February, 08, 2011

  • Added option to create main navigation structure.
  • Added new option for generating option elements with the value attribute.
  • Added new options for generating li elements with hyperlink tags or span tags within them.
  • Ability to create Ordered/Unordered lists.

Use Listify!


Discussion 18 Responses

wow…this is usefully…
thanks for this tools my friend :)

Great work sumeet keep going :)

This is really useful. When creating drop down menus with Listify is there an easy to way to add a value to each option? For example Superman

What do you mean by adding a value to each option? At the moment, the values are added automatically, when you generate the list. It parses the value from the text you paste in the text box.

I did include some HTML in my reply but it looks like it was stripped out. I meant adding ‘value=valuename’ in the opening option tag… for example sending a value to the server

It is not supported at present. But thanks for the suggestion. Will include it in future revisions :)

Would be awesome as an Adobe Air app.

Being able to set a custom value would also be cool. So we could create lists like this:
value1|option1,value2|option2 etc.

A really simple to read article . Whenever i check your blog i find always a unique perspective . And,you have chosen a really unique theme . I think i might design something similar for a future site that i want to build . On top of that i really like most of the posts and your different point of view. keep it up

Easily, the article is actually topic on HTML I mean( html tools ) related issue. CommentLuv plugin also a best tool for wordpress.

I want to thank the blogger very much not only for this post but also for his all previous efforts. :)
Thanks guys.

This is great – just what I need. Any chance of adding support for definition description (dd)?

This is awesome. thank you for providing it, this will save me so much time when converting client’s ad copy into ordered lists.

HOWEVER, I found a problem.. if the text contains an ampersand (& character), the converted results contain only the text up to that characters.

For example, if this is my original text:

This is the first line
This is the second & best line
This is the third line

the resulting converted list will look like this:

This is the first line
This is the second

Is there any way to fix it so that & character will be processed and included, and all of the text included?

Thanks in advance.. :)

Hey Beavis, glad you liked it :) Thanks for pointing out the bug. I will try to fix it soon.

Thanks, Sumeet… that would be great, much appreciated :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>