Tips for deleting text on a webpage either prior to or following a certain character

Is there a way to remove everything after either 'am' or 'pm' in the date (the excerpt) on a WordPress site that has a list of headlines followed by a source attribution and a date?

Example:

NBA Finals: Warriors will face Cavaliers yet again

USA Today – NBA | May 29, 2018 5:39 am Sports Pulse: USA TODAY Sports’ Sam Amick breaks down the Warriors’ Game 7 win over the Rockets, and how they’ll match up in a fourth consecutive.

HTML containing the content:

<div class="entry-content cf" itemprop="text">
  <div class="entry-excerpt">
    <p>
    Boston Herald &#8211; Boston Celtics | May 29, 2018 8:47 am Here we go again. And again. And, well, again. Round 4 &mdash; as many predicted, and others probably lamented &mdash; is happening. Cleveland and Golden
    </p>
  </div>
</div>

jquerycss

Answer №1

Assuming you are utilizing jQuery. https://example.com/code-snippet

$(document).ready(function() {

    $('.title').each(function() {
    $(this).text(
        $(this).text().substr(0,
          $(this).text().indexOf(" am") > -1 ?
             $(this).text().indexOf(" am") + 3 :
             $(this).text().indexOf(" pm") + 3)
    )
  })

});

Answer №2

Here is an alternative javascript/jQuery solution for a specific problem..

$('.entry-excerpt').each(function() {
  var string = $(this).find('p').text();
  if ($(this).find('p').is(':contains(" am ")')) {
    amString = string.substring(0, string.indexOf(' am '));
    $(this).find('p').text(amString + ' am');
  } else if ($(this).find('p').is(':contains(" pm ")')) {
    pmString = string.substring(0, string.indexOf(' pm '));
    $(this).find('p').text(pmString + ' pm');
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-excerpt">
  <p>
  NBA Finals: Warriors will face Cavaliers yet again

  USA Today – NBA | May 29, 2018 5:39 am SportsPulse: USA TODAY Sports’ Sam Amick breaks down the Warriors’ Game 7 win over the Rockets, and how they’ll match up in a fourth conseuctive
  </p>
</div>
<div class="entry-excerpt">
  <p>
  Boston Herald &#8211; Boston Celtics | May 29, 2018 8:47 pm Here we go again. And again. And, well, again. Round 4 &mdash; as many predicted, and others probably lamented &mdash; is happening. Cleveland and Golden
  </p>
</div>

fiddle

https://jsfiddle.net/Hastig/o8hedrsk/

credit

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"JavaScript code for creating a dynamic switching effect in HTML

I currently have 4 divs on my webpage that can be hidden or shown using JavaScript when clicking the menu at the top of the page. Here is my current script: <script type="text/javascript"> function showHide(d) { var onediv = document.get ...

javascriptjqueryhtml

How to make inline divs wrap to the next line once a set number of divs have been displayed

I have a main div containing multiple smaller square divs, set up like this: <div class="container"> <div class="little-square"></div> <div class="little-square"></div> <div class="little-square"></div&g ...

htmlcss

Embracing the balance of a gradient backdrop

I'm looking to create a gradient background for my page that transitions from light blue in the center to dark blue on the sides in a symmetrical way. I've tried using a linear gradient that goes from left to right, but it doesn't achieve th ...

htmlcss

Utilizing AJAX with JSON for passing parameters

function FetchAndSerialize() { $.ajax({ type: "POST", url: "GetDataPage.aspx/SerializeData", data: "{}", contentType: "application/json", dataType: "json", success: function (r ...

jqueryasp.netjson

Is there a way to make jQuery wait for an animation by checking the animation queue

Is there a way to query the animation queue and wait for an animation without using a callback function sent to the animation itself? Can a watchdog loop be implemented outside of the animation call for this purpose? Illustrative Situation Our use of jQu ...

jqueryhtmljquery-animate

Creating a dynamic dropdown list with PHP and AJAX using JQuery

I was attempting to create a dynamic dependent select list using AJAX, but I am facing issues with getting the second list to populate. Below is the code I have been working with. The gethint.php file seems to be functioning properly. I'm not sure whe ...

javascriptphpjquerymysqlajax

What could be causing my JSON to update for one API but not the other?

My frustration with the below snippet is preventing me from following the usual advice of "Go to bed and you'll see the error in the morning." The code snippet below contains various tables with an NVD3 chart and some plain p tags that hold data from ...

javascriptjqueryjsond3.js

Update the content retrieved through ajax periodically

Looking to set up a periodic update for this ajax fetch function, say every 10 seconds. I've tried a few approaches but none seem to work as expected. That's why I'm reaching out here for help. So, any idea how I can refresh the content ev ...

phpjqueryhtmlajax

the button function is unresponsive

Can someone please help me troubleshoot my jQuery code? Everything seems fine, but the generate button is not working when clicked! PS: I've searched extensively for a solution to this problem but haven't been able to find one. I've also at ...

javascriptjquery

The issue with the yearRange in Materialize CSS datepicker persists

I have implemented a Materialize CSS datepicker and am trying to set the yearRange from 1950 to 2005. However, when I use the yearRange parameter, it is not functioning as expected and shows future years in the dropdown. Below is the code I am currently us ...

jquerydatepickermaterial-design

jQuery Accordian malfunctioning for all elements except the first one in the list

Trying to implement an accordion feature that can be utilized across the entire website. The current logic seems to be partially functional... When I click on any of the accordions, it should open by adding a 'show' class, but this only works for ...

javascripthtmljquerycss

Using jQuery to send a post request to a servlet and then refreshing the parent

As I dive into the world of ajax jQuery documentation, my goal is to send a post call to a servlet that I have created in order to save an entry in my database. Once the post is successful, I aim to reload the parent of the iFrame responsible for rendering ...

javajqueryajaxservlets

When clicking on the dropdown items of another button, the class of the child element in the Bootstrap button dropdown is being removed

Check out the JSFiddle for this code snippet. I'm attempting to implement Bootstrap's drop-down menu using list items instead of options. When a list item is selected, the data should be retrieved and displayed as an active selection within a bu ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to center a text and a rectangle (containing some text) on a page using Bootstrap?

I'm in the process of creating a webpage using HTML and CSS that needs to look exactly like this image: https://i.sstatic.net/wYKZw.png Currently, I have a version of it on JSFiddle. The issue with the JSFiddle version is that the text and rectangle ...

htmlcssbootstrap-4

jQuery and handling multiple forms - the first form steals the show!

I encountered an issue on my page where I have several form elements and jQuery code to execute when a form is clicked. Here is the structure of the form: <form method="post" action=""> {% csrf_token %} <input id="vote" name="vote" type="hidden" ...

javascriptjqueryhtml

What is the best method for serving static files within a nested EJS view directory?

Assuming I have the directory structure below: |--Views/ | --partial/ | --links.ejs | |--assets/ | --css/ | --styles.css | |--server.js Code for links.ejs <link rel="stylesheet" type="text/css" href="css/forms/switches.css"& ...

javascripthtmlcssnode.jsexpress

What sets apart using JQuery to run AJAX from using plain XMLHttpRequest for AJAX requests?

Can you explain the advantages and disadvantages of using JQuery versus XMLHttpRequest for running AJAX code? While I understand that JQuery is essentially a JavaScript library, there must be some key differences to consider. Please elaborate on this top ...

javascriptjqueryajax

Using Select2 JS to populate dropdown options with an AJAX response

I have a large list of pincodes ranging from 20,000 to 25,000. I want the user to search for the first 3 digits of a pincode and then trigger an ajax request to fetch a list of pincodes that match those 3 digits. Although I am successfully receiving a res ...

jqueryajaxjquery-select2

Leverage the power of Bootstrap by incorporating not one, but two carousels on a single page - one featuring a single item per

I have a unique challenge with using multiple Bootstrap Carousels on my WordPress website One of the carousels features one item per slide, while the other carousel has three items per slide, moving one item at a time in a cyclical pattern like this: [1, ...

javascriptjquerycsswordpressbootstrap-4

Using Rails: How to invoke a function in the asset pipeline from a JS response?

In one of the JavaScript files I am working with, I have defined an object and a function: chosen.coffee Foo = do_this: -> $('.slider').slider() $ -> Foo.do_this() This code initializes JQueryUI to turn a specific div into a ...

javascriptjqueryruby-on-rails