CODEWITHSUNDEEP
jqueryhtml
Kavya Shree
Kavya Shree

Reputation: 1032

Add class to spaces in paragraph using Jquery

Below is my Jquery code.

$( document ).ready(function() {
   var listItem = $('#list_id');

    var html = $.trim(listItem.html());

    var count = 0;
    var match = ' ';

    while (html.substr(0, match.length) === match) {
       count++;
       html = html.substr(count * match.length, (count * match.length) + match.length);
    }

    alert(count);
});

I want to find the spaces in a paragraph, and after that add a class to that particular space in the paragraph.

Initially I need to find the spaces. I have tried the code above but its return count is zero. This means it's not found any spaces.

I will use addClass to add the class droppable to the paragraph inside the textarea.

<textarea id="list_id">"Kohl" is considered not only as a cosmetic; the importance of  kohl around eyes dates back to 4000 B.C. when Egyptians used a paste of antimony sulphide and lead sulphide. 
They that it kept the eyes safe from infections, sun rays, and evil spirits. Kohl literally means "something that brightens". So, it was applied around the eyes to draw attention and make them look .</textarea>

enter image description here

From the screenshot.I wanna drag and drop tht choice1 button into textarea anywhere the spaces in textarea.for tht button should be a draggable and Space in textarea should be taken as droppable.From this I wanna define wherevr spaces in paragraph I should declare as droppable so tht I can drag and drop.Thts y Im trying this scenario.Is this possble or Not.

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Droppable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
    $( ".droppable" ).droppable({
      drop: function( event, ui ) {
        /*$( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );*/
         $( "#draggable" ).draggable( 'disable' );
      }
    });
  } );
  $( document ).ready(function() {

var listItem = $('#list_id').val().replace(/\ /g, "<div class='droppable'> </div>");

   console.log(listItem);
});
 </script>
</head>
<body>

<div id="draggable">
  <p>D</p>
</div>
<textarea id="list_id" class="droppable">"Kohl" is considered not only as a cosmetic; 
the importance of  kohl around eyes dates back to 4000 B.C. when Egyptians used a paste of antimony sulphide and lead sulphide. 
They that it kept the eyes safe from infections, sun rays, and evil spirits. Kohl literally means "something that brightens". So, it was applied around the eyes to draw attention and make them look .</textarea>
</body>
</html>

Upvotes: 0

Views: 260

Answers (3)

Kavya Shree
Kavya Shree

Reputation: 1032

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>jQuery UI Droppable - Default functionality</title> 
<link rel="stylesheet" href="assets/css/jquery-ui.css"> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<style> 
.draggable{
  display: inline-block;
}

#list_id .space{
    background-color: transparent;
    border:1px dashed #ccc;
    padding: 3px 40px;
  }
</style> 
<script src="assets/js/jquery-1.12.4.js"></script> 
 <script src="assets/js/jquery-ui.js"></script>
<script> 
$( document ).ready(function() {
  $('.draggable').draggable({
        revert: 'invalid',
        stop: function(){
            $(this).draggable('option','revert','invalid');
        }
    });

    $('.draggable').droppable({
       greedy: true,
        tolerance: 'touch',
       drop: function(event,ui){
           ui.draggable.draggable('option','revert',true);
       }
    });
  var listItem = $('#list_id');

  function replaceSpaces(){
    return listItem.text().replace(/\ /g, "<span class='space'> </span>")
  }

  $('#list_id').on("blur", function(){
    $("#list_id").html(replaceSpaces());
    $("#list_id_input").val(replaceSpaces());



    $(".space").droppable({
     accept: ".draggable",
     drop: function(event, ui) {        
       console.log(event.target);
       $(this).append($(ui.draggable));
       $(ui.draggable).removeAttr("style");
     },
    });
  });
});
</script> 
</head> 
<body> 
<div class="draggable">Choice1</div><br/><br/>
<div id="list_id" contentEditable>"Kohl" is considered not only as a cosmetic; the importance of  kohl around eyes dates back to 4000 B.C. when Egyptians used a paste of antimony sulphide and lead sulphide. 
They that it kept the eyes safe from infections, sun rays, and evil spirits. Kohl literally means "something that brightens". So, it was applied around the eyes to draw attention and make them look .</div>
<input type="hidden" id="list_id_input">
</body> 
</html>

Upvotes: 0

aavrug
aavrug

Reputation: 1889

Try something like this just put a condition for checking blank space.

document.getElementById('drag').addEventListener('dragstart', function (e) {
  e.dataTransfer.setData("text", '{' + this.id + '}');
});
<p id="drag" href="#" draggable="true">hello</a>

<textarea id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</textarea>

Upvotes: 1

Caio Kawasaki
Caio Kawasaki

Reputation: 2950

$( document ).ready(function() {
   var listItem = $('#list_id').val().replace(/\ /g, "<span class='space'> </span>");

   console.log(listItem);
});

This will work, but you should try something else instead of a textarea, you can try a contentEditable div...

Edit

I don't know if this is what you want to achieve, but here is a working fiddle with basic concepts, this is the initial idea...

https://jsfiddle.net/caiokawasaki/d07pvbe3/

Upvotes: 0

Related Questions