Trim long html for preview without breaking html tags - html

I was put in front of this problem when working on a blog post preview list.
They need to shorten the content but not break any html tags by leaving them open.
I have heard that reg ex is not a good option. I am looking for something simple and working.
I appreciate your help in advance as always (SO ended up being a very nice place to come over with problems like that :-)

Wordpress has a function for generating excerpts built-in to the blogging platform which generates an excerpt from the actual blog post.
You didn't specify which language you were looking to use for the trim function so here is the Wordpress version. It can be easily modified and re-purposed to use outside of Wordpress if need be.
wp_trim_words() function reference
/**
* Generates an excerpt from the content, if needed.
*
* The excerpt word amount will be 55 words and if the amount is greater than
* that, then the string ' […]' will be appended to the excerpt. If the string
* is less than 55 words, then the content will be returned as is.
*
* The 55 word limit can be modified by plugins/themes using the excerpt_length filter
* The ' […]' string can be modified by plugins/themes using the excerpt_more filter
*
* #since 1.5.0
*
* #param string $text Optional. The excerpt. If set to empty, an excerpt is generated.
* #return string The excerpt.
*/
function wp_trim_excerpt($text = '') {
$raw_excerpt = $text;
if ( '' == $text ) {
$text = get_the_content('');
$text = strip_shortcodes( $text );
$text = apply_filters('the_content', $text);
$text = str_replace(']]>', ']]>', $text);
$excerpt_length = apply_filters('excerpt_length', 55);
$excerpt_more = apply_filters('excerpt_more', ' ' . '[…]');
$text = wp_trim_words( $text, $excerpt_length, $excerpt_more );
}
return apply_filters('wp_trim_excerpt', $text, $raw_excerpt);
}

Related

 (OBJ) symbol in WordPress URL?

I have a question about a WordPress URL in Google Chrome 94.0.4606.81:
I was reading a WordPress article recently and noticed that there is an  (OBJ) symbol in the URL. The symbol is also in the webpage title.
Take Ownership and Select Owner
Question:
What is the purpose of the  (OBJ) symbol -- and how is it possible that it has been included in a URL?
It seems like you got this symbol in the title field of the article. You can remove it from there. If you don't see it select everything in the field with ctrl + a and write the title new.
Honestly, I don't know what nature is this copy/paste issue in WP, and the "Object Replacement Character"
To avoid appearing this character it's enough to use Ctrl+Shift+V shortcut while pasting into WP post title field, means: Paste Text Without Formatting.
If you want to be sure in protecting the post slug (means: post URL) you can use the snippet in your functions.php:
/**
* Remove the strange [OBJ] character in the post slug
* See: https://github.com/WordPress/gutenberg/issues/38637
*/
add_filter("wp_unique_post_slug", function($slug, $post_ID, $post_status, $post_type, $post_parent, $original_slug) {
return preg_replace('/(%ef%bf%bc)|(efbfbc)|[^\w-]/', '', $slug);
}, 10, 6);
preg_replace function searches here for string "%ef%bf%bc" or "efbfbc" (UTF-8 - hex encoded OBJ character) OR any character that IS NOT base alphanumeric character or dash character – to delete.
Since you've mentioned it also made into the title: I use this to filter the title on save to remove these special characters.
function sbnc_filter_title($title) {
// Concatenate separate diacritics into one character if we can
if ( function_exists('normalizer_normalize') && strlen( normalizer_normalize( $title ) ) < strlen( $title ) ) {
$title = normalizer_normalize( $title );
}
// Replace no-break-space with regular space
$title = preg_replace( '/\x{00A0}/u', ' ', $title );
// Remove whitespaces from the ends
$title = trim($title);
// Remove any invisible and control characters
$title = preg_replace('/[^\x{0020}-\x{007e}\x{00a1}-\x{FFEF}]/u', '', $title);
return $title;
}
add_filter('title_save_pre', 'sbnc_filter_title');
Please note that you may need to extend set of allowed UTF range in the preg_replace call based on the languages you support. The range in the example should suit most languages actively used in the word, but if you may write article titles that include archaic scripts like Linear-B, gothic etc. you may need to extend the ranges.
If you copy-pasted it from somewhere, like I did, remember to paste as text using Ctrl + Shift + V to avoid this.
Also, it is the case that this [OBJ] only appears in Chromium-based browsers like Chrome, Edge etc, unlike in Firefox which I believe discards it by default.

Issue trying to convert HTML to Ajax

I got this in the video script that I use for my website (Videos Page Layout):
<div class="video-views pull-left">
{$videos[i].viewnumber|kilo} {if $videos[i].viewnumber == '1'}{t c='global.view'}{else}{t c='global.views'}{/if}
</div>
Related videos section uses Ajax for videos page layout generated with the "show more" button.
My problem is: I don't know how to convert the "kilo" function in Ajax {$videos[i].viewnumber|kilo}. I attempted a few things but with no result.
$code[] = '<div class="video-views pull-left">';
$views = ($video['viewnumber'] == '1') ? $lang['global.view'] : $lang['global.views'];
$code[] = $video['viewnumber']. ' '.$views;
$code[] = '</div>';
Kilo is not a modifier that is included in the Smarty distribution, but if you have access to the code on your site, you can extract the code from the plugin file, it is most likely in smarty/libs/plugins/modifier.kilo.php.
It looks like you're working in PHP to construct a response to an AJAX request, so you can just pull that code out and re-use it.
If you do not have access to the modifier file, you can just recreate the formatting on your own. Judging by the context, it's something simple like:
<?php
/**
* Format integers into human readable strings indicating number of thousands
* Example: 1200 -> 1.2K
* #param int $value
* #return string
*/
function kilo(int $value): string
{
// If the value is less than 1000, just return it
if($value < 1000)
{
return $value;
}
/*
* If the value is evenly divisible by 1000, we want to show a whole number,
* otherwise format it as a single precision float. Add "K" string literal
* to indicate thousands
*/
$formatString = ($value % 1000) ? '%.1fK':'%dK';
// Divide value by 1000
$value /= 1000;
// Return the formatted string
return sprintf($formatString, $value);
}
// Define some test data and echo the formatted values
$testViewCounts = [1, 123, 1230, 12300, 123000];
foreach($testViewCounts as $views)
{
// If only one view, do not pluralize
$label = ($views == 1) ? 'view':'views';
echo kilo($views).' '.$label.PHP_EOL;
}

How to keep metadata fields on one line

I am trying to customize the metadata for my posts. Specifically, I want to change the separator from the default forward slash (/) to a vertical line (|). I also want to add the word "Updated" before the date displayed. And, I want to keep the option to display reading time. (*FYI: I know basically nothing about coding, just trying to override the metadata output from Astra)
I used this code to change the separator (found in a post about how to customize post meta in Astra theme):
add_filter('astra_single_post_meta', 'custom_post_meta');
function custom_post_meta($old_meta)
{
$post_meta = astra_get_option('blog-single-meta');
if (!$post_meta) return $old_meta;
$new_output = astra_get_post_meta($post_meta, "|");
if (!$new_output) return $old_meta;
return "<div class='entry-meta'>$new_output</div>";
}
See the output in image 1 - looks great!
output of new code for separator
This is close, but still needed to add "Updated" before the date. So, I used this code (from same post mentioned above):
function astra_post_date()
{
$format = apply_filters('astra_post_date_format', '');
$published = esc_html(get_the_date($format));
$modified = esc_html(get_the_modified_date($format));
$output = '<p class="posted-on">';
$output .= 'Updated: <span class="published" ';
$output .= 'itemprop="datePublished">' . $published;
$output .= '</span>';
$output .= '</p>';
return apply_filters('astra_post_date', $output);
}
See output in image 2 - content is perfect, but formatting is wrong. Can't figure out how to edit the code to get all 3 fields on the same line.
output of new code for adding "Update"
What do I need to change in the 2nd block of code to keep everything on one line like the 1st block of code?
Thanks for any help!

How to change the search action in wordpress search bar?

Create a new post and publish it.
The title is my test for search, content in it is as below:
no host route
Check what happen in wordpress database.
select post_title from wp_posts
where post_content like "%no%"
and post_content like "%route%"
and post_content like "%to%"
and post_content like "%host%";
The post named my test for search will not be in the select's result.
Type no route to host in wordpress search bar,and click enter.
The post named my test for search shown as result.
I found the reason that the webpage contain to ,in the left upper side corner ,there is a word Customize which contains the searched word to.
How to change such search action in wordpress serach bar?
I want to make the search behavior in wordpress saerch bar, for example ,when you type no route to host, equal to the following sql command.
select post_title from wp_posts where post_content like "%no%route%to%host%";
All the plugins in my wordpress.
CodePen Embedded Pens Shortcode
Crayon Syntax Highlighter
Disable Google Fonts
Quotmarks Replacer
SyntaxHighlighter Evolved
There's this addition to the SQL WHERE clause on wp-includes/class-wp-query.php:1306:
<?php
// wp-includes/class-wp-query.php:~1306
foreach ( $q['search_terms'] as $term ) {
//...
$like = $n . $wpdb->esc_like( $term ) . $n;
$search .= $wpdb->prepare( "{$searchand}(({$wpdb->posts}.post_title $like_op %s) $andor_op ({$wpdb->posts}.post_excerpt $like_op %s) $andor_op ({$wpdb->posts}.post_content $like_op %s))", $like, $like, $like );
// ...
Therefore, I'd hook into the pre_get_posts, and supply the words of the query as explicit "search_terms", since they get added into that clause, with the LIKE modifier just as you said were looking for!
So, we might do something like this:
<?php
// functions.php
function fuzzify_query(\WP_Query $q) {
if (true === $q->is_search()
&& true === property_exists($q, 'query')
&& true === key_exists('s', $q->query)
) {
$original_query = $q->query['s'];
$words = explode(' ', $original_query);
$fuzzy_words = array_map(
function($word) {
return '%'.$word.'%';
},
$words
);
$q->query_vars['search_terms'] = $fuzzy_words;
return $q;
}
return $q;
}
add_action('pre_get_posts', 'fuzzify_query', 100); // Or whatever priority your fuzziness requires!

How to stop tags within a div from affecting elements outside a div?

So, on my website, I have user generated content. I have a wysiwyg editor, but there is a view source part. I have a few approved tags.
But it occurred to me, what if a user just puts in without closing it? Then the rest of the rest of the page.
How can I get around this.
I actaully wanted to tell you look how wordpress does this untill i tested it and found out that wordpress does not care ^^ i can break my page easy by open divs and not colosing them
anyway i found this.
/** * close all open xhtml tags at the end of the string
* * #param string $html
* #return string
* #author Milian <mail#mili.de>
*/function closetags($html) {
#put all opened tags into an array
preg_match_all('#<([a-z]+)(?: .*)?(?<![/|/ ])>#iU', $html, $result);
$openedtags = $result[1]; #put all closed tags into an array
preg_match_all('#</([a-z]+)>#iU', $html, $result);
$closedtags = $result[1];
$len_opened = count($openedtags);
# all tags are closed
if (count($closedtags) == $len_opened) {
return $html;
}
$openedtags = array_reverse($openedtags);
# close tags
for ($i=0; $i < $len_opened; $i++) {
if (!in_array($openedtags[$i], $closedtags)){
$html .= '</'.$openedtags[$i].'>';
} else {
unset($closedtags[array_search($openedtags[$i], $closedtags)]); }
} return $html;}
this should be what you are looking for.
This is a very complex topic in general and there's no easy shortcut. Before you start reinventing the wheel, use a library that has been designed to do exactly that. Supposedly HTML Purifier is one of the few, if not the only, libraries that gets it right.