Issues with Jquery's Slice, Substr, and Substring functionalities

Question

Issues with Jquery's Slice, Substr, and Substring functionalities

I need to divide the content into two separate sections. Unfortunately, the first variable (summarySentence1and2) is not capturing the desired result, while the second variable (summarySentanceOthers) is storing all of the content from the source field. I aim to split the content from 0 to 28 characters in the first variable and from 28 to the end in the second variable.

var summaryText = $(this).find('.review-body .field-name-field-review-summary').text();
var summarySentence1and2 = summaryText.split(' ').slice(0, 28).join(' ');
var summarySentanceOthers = summaryText.split(' ').slice(28).join(' ');

//alert(summarySentence1and2);
//alert(summarySentanceOthers);

$('#first').text(summarySentence1and2);
$('#second').text(summarySentanceOthers);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="review-body" itemprop="reviewBody">
 <div class="field-name-field-review-summary">
We had an excellent guide in Antonino who took us on some excellent routes and had extensive knowledge of the area, fauna and history of the volcanoes and the evolution of the landscape. The hotels and included meals were disappointing and should have been of a higher quality.
</div>
</div>

<p id="first"></p>
<p id="second"></p>

javascript jquery html css

Answer 1

Answer №1

Here is a revised version of the code I have adapted for you:

<script>

    $(document).ready(function () {
        var description = $(this).find('.review-body .field-name-field-review-description').text();
        var firstPart = description.split(' ').slice(0, 20).join(' ');
        var secondPart = description.split(' ').slice(20).join(' ');

        //alert(firstPart);
        //alert(secondPart);

        $('#first').text(firstPart);
        $('#second').text(secondPart);
    });


</script>

Answer 2

Here is a revised version of the code I have adapted for you:

<script>

    $(document).ready(function () {
        var description = $(this).find('.review-body .field-name-field-review-description').text();
        var firstPart = description.split(' ').slice(0, 20).join(' ');
        var secondPart = description.split(' ').slice(20).join(' ');

        //alert(firstPart);
        //alert(secondPart);

        $('#first').text(firstPart);
        $('#second').text(secondPart);
    });


</script>

Answer 3

Answer №2

It seems like the issue you're experiencing is because your code is missing the jQuery document ready function

$(function() {
  var text = $(this).find('.review-body .field-name-field-review-summary').text();
  var sentence1and2 = text.split(' ').slice(0, 28).join(' ');
  var otherSentences = text.split(' ').slice(28).join(' ');

  $('#first').text(sentence1and2);
  $('#second').text(otherSentences);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="review-body" itemprop="reviewBody">
  <div class="field-name-field-review-summary">
    We had an excellent guide in Antonino who took us on some excellent routes and had extensive knowledge of the area, fauna and history of the volcanoes and the evolution of the landscape. The hotels and included meals were disappointing and should have
    been of a higher quality.
  </div>
</div>

<p id="first"></p>
<p id="second"></p>

Answer 4

It seems like the issue you're experiencing is because your code is missing the jQuery document ready function

$(function() {
  var text = $(this).find('.review-body .field-name-field-review-summary').text();
  var sentence1and2 = text.split(' ').slice(0, 28).join(' ');
  var otherSentences = text.split(' ').slice(28).join(' ');

  $('#first').text(sentence1and2);
  $('#second').text(otherSentences);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="review-body" itemprop="reviewBody">
  <div class="field-name-field-review-summary">
    We had an excellent guide in Antonino who took us on some excellent routes and had extensive knowledge of the area, fauna and history of the volcanoes and the evolution of the landscape. The hotels and included meals were disappointing and should have
    been of a higher quality.
  </div>
</div>

<p id="first"></p>
<p id="second"></p>

Answer 5

Answer №3

To accomplish this task, you have two options:

var summaryText = $('body').find('.review-body .field-name-field-review-summary').text();

Alternatively, you can use:

var summaryText = $('.review-body .field-name-field-review-summary').text();

The this reference in your code points to the window object, which is unaware of the content within the body.

var summaryText = $('.review-body .field-name-field-review-summary').text();
var summarySentence1and2 = summaryText.split(' ').slice(0, 28).join(' ');
var summarySentanceOthers = summaryText.split(' ').slice(28).join(' ');

console.log(summarySentence1and2);
console.log(summarySentanceOthers);

$('#first').text(summarySentence1and2);
$('#second').text(summarySentanceOthers);

.as-console-wrapper { display: none !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="review-body" itemprop="reviewBody">
  <div class="field-name-field-review-summary">
    We had an excellent guide in Antonino who took us on some excellent routes and had extensive knowledge of the area, fauna and history of the volcanoes and the evolution of the landscape. The hotels and included meals were disappointing and should have
    been of a higher quality.
  </div>
</div>

<p id="first"></p>
<p id="second"></p>

Answer 6

To accomplish this task, you have two options:

var summaryText = $('body').find('.review-body .field-name-field-review-summary').text();

Alternatively, you can use:

var summaryText = $('.review-body .field-name-field-review-summary').text();

The this reference in your code points to the window object, which is unaware of the content within the body.

var summaryText = $('.review-body .field-name-field-review-summary').text();
var summarySentence1and2 = summaryText.split(' ').slice(0, 28).join(' ');
var summarySentanceOthers = summaryText.split(' ').slice(28).join(' ');

console.log(summarySentence1and2);
console.log(summarySentanceOthers);

$('#first').text(summarySentence1and2);
$('#second').text(summarySentanceOthers);

.as-console-wrapper { display: none !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="review-body" itemprop="reviewBody">
  <div class="field-name-field-review-summary">
    We had an excellent guide in Antonino who took us on some excellent routes and had extensive knowledge of the area, fauna and history of the volcanoes and the evolution of the landscape. The hotels and included meals were disappointing and should have
    been of a higher quality.
  </div>
</div>

<p id="first"></p>
<p id="second"></p>

Answer 7

Answer №4

After carefully considering your question, I recommend using the code "$('.review-body').text();" instead of "$(this).find('.review-body .field-name-field-review-summary').text();"

var summaryText = $('.review-body').text();
var summarySentence1and2 = summaryText.split(' ').slice(0, 28).join(' ');
var summarySentanceOthers = summaryText.split(' ').slice(28).join(' ');

//alert(summarySentence1and2);
//alert(summarySentanceOthers);

$('#first').text(summarySentence1and2);
$('#second').text(summarySentanceOthers);

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="review-body" itemprop="reviewBody">
 <div class="field-name-field-review-summary">
We had an excellent guide in Antonino who took us on some excellent routes and had extensive knowledge of the area, fauna and history of the volcanoes and the evolution of the landscape. The hotels and included meals were disappointing and should have been of a higher quality.
</div>
</div>

<p id="first"></p>
<p id="second"></p>

Answer 8

After carefully considering your question, I recommend using the code "$('.review-body').text();" instead of "$(this).find('.review-body .field-name-field-review-summary').text();"

var summaryText = $('.review-body').text();
var summarySentence1and2 = summaryText.split(' ').slice(0, 28).join(' ');
var summarySentanceOthers = summaryText.split(' ').slice(28).join(' ');

//alert(summarySentence1and2);
//alert(summarySentanceOthers);

$('#first').text(summarySentence1and2);
$('#second').text(summarySentanceOthers);

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="review-body" itemprop="reviewBody">
 <div class="field-name-field-review-summary">
We had an excellent guide in Antonino who took us on some excellent routes and had extensive knowledge of the area, fauna and history of the volcanoes and the evolution of the landscape. The hotels and included meals were disappointing and should have been of a higher quality.
</div>
</div>

<p id="first"></p>
<p id="second"></p>

Answer 9

Answer №5

Fixing the problem by including .trim()

var summaryText = $(this).find('.review-body .field-name-field-review-summary').text().trim();

Answer 10

Fixing the problem by including .trim()

var summaryText = $(this).find('.review-body .field-name-field-review-summary').text().trim();

Issues with Jquery's Slice, Substr, and Substring functionalities

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Enabling and disabling contenteditable functionality on a div element in Angular

Need for Jekyll to Incorporate "excerpt" Liquid Tag in YAML Front Matter

What could be the reason for PassportJS in Node failing to clear the session upon logout?

JavaScript hack for improving slow scrolling experience with smooth scroll on Firefox

What is the method to adjust the font size for section, subsection, and other sections in Doxygen?

Tips for transforming information into JSON format

Troubulation with z-index on HTML5 Canvas in Google Chrome

Unusual Conduct when Interacting with ContentEditable Text

Hide content when clicking on the body

sending a file to a controller without the use of a form

Navigating through the website has become quite challenging due to the malfunctioning navigation bar. Instead

Issue with the side panel: unable to close it

Is there a way to have a button function as a submit button for a form even when it is located in a separate component within a react application?

Using the toggle method or IF statements in JavaScript to implement show and hide functionality upon clicking

Create a Bootstrap Affix that sticks the header at the top of the page after scrolling 100

What is the best way to align the right column section below the left column section on a reduced screen size in a responsive design?

Is there a way to easily access the automated departure range feature of a date

What is the best way to resize images while also maintaining their ability to transition on hover?

My custom Material UI table is being hindered by unnecessary div tags that are interfering with my CSS styling

Using Three.js to turn an object around its Y-axis to face a specific direction