jQuery Convert Text to HTML List - $.stringToList

This jQuery utility converts text into an HTML list (ordered or unordered). It uses sentence-ending periods as delimiters.

Before:

After:

jQuery.stringToList() (Original Version):

/*
 * $.stringToList
 * jQuery Function to convert a block of text into a HTML list.
 * Requires: Full stops after each sentence to delimit list items.
 * @param: listType: 'ul' or 'ol'
 * Usage: $('#inclusions').stringToList('ul');
 * Author: Sam Deering
 */
$.fn.extend({
    stringToList: function(listType) {
        var sentenceRegex = /[a-z0-9,'‘- ]+/igm, htmlList = '<' + listType + '>';
        $.each($(this).html().match(sentenceRegex), function(i, v) {
            if (v && /[a-z0-9]+/igm.test(v) && v != 'strong') {
                htmlList += '

' + v + '

'; } }); htmlList += ''; $(this).html(htmlList); } }); // Convert text to HTML list $('#inclusions').stringToList('ul');

jQuery.stringToList() (Namespaced Version):

/*
 * NAMESPACE.stringToList - jQuery Function to convert a block of text into a HTML list.
 * Requires: Full stops after each sentence to delimit list items.
 * @param: textContainer (jQuery object), listType: 'ul' or 'ol'
 * Usage: NAMESPACE.stringToList($('#inclusions'),'ul');
 */
NAMESPACE.stringToList = function(textContainer, listType) {
    var sentenceRegex = /[a-z0-9,'‘- ]+/igm, htmlList = '<' + listType + '>';
    $.each(textContainer.html().match(sentenceRegex), function(i, v) {
        if (v && /[a-z0-9]+/igm.test(v) && v != 'strong') {
            htmlList += '

' + v + '

'; } }); htmlList += ''; textContainer.html(htmlList); }; // Convert text to HTML list NAMESPACE.stringToList($('#inclusions'), 'ul');

Frequently Asked Questions (FAQs) about jQuery String to HTML Conversion using $.parseHTML():

This section addresses common questions about converting strings to HTML using jQuery's $.parseHTML() method, a different approach than the original code. The original code directly manipulates the HTML of a container element. $.parseHTML() offers more control and is safer for handling potentially malformed HTML.

How to convert a string to an HTML element with jQuery's $.parseHTML()?

Use $.parseHTML() to parse the string into DOM nodes, then append them to the DOM.

var str = "<div>Hello World!</div>";
var html = $.parseHTML(str);
$("body").append(html);

$.parseHTML() vs. jQuery()

$.parseHTML() returns an array of DOM nodes. jQuery() can accept a string but treats it differently (adding to the existing jQuery object). $.parseHTML() is specifically for parsing HTML strings.

Converting a string to multiple HTML elements

$.parseHTML() handles multiple elements within the string, returning an array of nodes.

Adding converted HTML to the DOM

Use append(), prepend(), insertBefore(), or insertAfter() to add the parsed elements to the DOM.

Handling errors with $.parseHTML()

$.parseHTML() doesn't have explicit error handling. A poorly formed string might result in an empty array. Robust error handling would require additional checks.

Executing scripts with $.parseHTML()

Scripts within the parsed HTML are not executed by default. This is a security feature.

jQuery version compatibility

$.parseHTML() is available in jQuery 1.9 and later.

Parsing XML or SVG

$.parseHTML() is for HTML only. Use $.parseXML() for XML.

Parsing a string into an HTML list or table with $.parseHTML()

Parse the string with $.parseHTML(), then manipulate the resulting DOM nodes to structure them into a list or table using jQuery methods.

This revised answer provides a more comprehensive and accurate explanation of both the original code and the common jQuery approach using $.parseHTML(). Remember to choose the method best suited for your needs and context. For simple list creation, the original stringToList function is sufficient. For more complex HTML manipulation or when dealing with potentially unsafe HTML input, $.parseHTML() is the safer and more robust option.

The above is the detailed content of jQuery Convert Text to HTML List - $.stringToList. For more information, please follow other related articles on the PHP Chinese website!