jQuery: How to go through all the characters in <p

I've got a paragraph: I want to put a ding in the universe.

I want to change the attributes of the characters in the text e.g. to change its color, so after this the paragraph should look like this:

  I   w  a  n  t ... 

How to realize it in jQuery?

标签： jquery text-editor

4条回答

SAY GOODBYE

2楼-- · 2019-09-14 13:52

Some combination of String.split() and jQuery.wrap() will probably do the trick.

Something like this: (untested, just whipped this up quickly)

var paragraph = $('<p>I want to put a ding in the universe.</p>');
var text = paragraph.text();
var newText = '';
$.each(text.split(), function(i, val) {
    if (val != ' ') {
        newText = newText + $(val).wrap('<span class="color"></span>');
    } else {
        newText = newText + val;
    }
});
paragraph.html(newText);

0人赞添加讨论(0) 举报

来，给爷笑一个

3楼-- · 2019-09-14 13:59

Since characters are not DOM-elements you need to build a new DOM:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>CharLoop</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
      <script type="text/javascript">
    $(document).ready(function() {
        $("p").each(function() {
            var $resultDom = $("<p/>");
            var $p = $(this);
            var text = $p.text();
            // Loop through every character in paragraph text
            for (var i=0, l = text.length; i < l; i++) {
                var $char = $("<span>" + text.charAt(i) + "</span>");
                // Set class
                $char.attr("class", "color" + i);
                // Set inline style if you don't want to hardcode alot of colors
                $char.css("color", "rgb(" + (i * 10) % 255 + "," + (i * 20) % 255 + "," + (i * 30) % 255 + ")");
                $resultDom.append($char);
            }
            $p.empty();
            $p.append($resultDom.children());
        });
    });
      </script>
   </head>
   <body>
      <p>I want to put a ding in the universe.</p>
      <p>Lorem ipsum</p>
   </body>
</html>

Beware of that this method might not be fast, and you are emptying the paragraph () so every information that is not text will be removed, for example links (<a />) will not be preserved. Result:

Result

0人赞添加讨论(0) 举报

够拽才男人

4楼-- · 2019-09-14 14:06

I don't see the point of wrapping individually with the spans that have the same class, but here you go:

var $p = $('p');

var array = $p.text().split('');

var result = '<span class="color">' +
              array.join('</span><span class="color">') + 
             '</span>';

$p.html(result);

EDIT: If you wanted to assign different classes, you could do something like this:

Example: http://jsfiddle.net/LnD6W/1/

var $p = $('p');

var array = $p.text().split('');

var colors = ['green','blue','orange','yellow','red'];

$.each(array, function( i ) {
    array[i] = '<span class="' + colors[ i % 5 ] + '">' + array[i] + '</span>';
});

$p.html(array.join(''));

CSS

.green { color:green; }
.blue { color: blue; }
.orange { color: orange; }
.yellow { color: yellow; }
.red { color: red; }

0人赞添加讨论(0) 举报

▲ chillily

5楼-- · 2019-09-14 14:11

A little slow with response but I have a working example: http://jsfiddle.net/YgzhK/

$(document).ready(
    function()
    {
        var oldText = $("#text").text(); 
        $("#text").html("");

        for (var i = 0; i < oldText.length; i++)
        {
            if (oldText.charAt(i) != " ")
                $("#text").append("<span class='color'>" + oldText.charAt(i) +"</span>");
            else
                $("#text").append(" ");
        }
    });

0人赞添加讨论(0) 举报

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间