Question 74544 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How can get First character of string of any html tag and bind to other tag in php? – WordPress

How can I achieve the below scenario with php?

Case 1

Input : <h2>Test text <img src="./test.png" /></h2>
Output : <span>T</span><h2>est text <img src="./test.png" /></h2>

Case 2

Input : <p>Test text</h2>
Output : <span>T</span><p>est text</p>

Case 3

Input - <h2><img src="./test.png" /> Test text </h2>
Output - <span>T</span><h2><img src="./test.png" /> est text</h2>

In the input html may be there are so many tags will included. I want any of first block holding the html

I have tried below code

<?php
$firstLetter = strip_tags(get_sub_field('text'));
$firstLetter = $firstLetter[0];
?>
<div class="capLetter"><?php echo $firstLetter; ?></div>
<?php echo substr(get_sub_field('text'), 4); ?>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After dogged so many possibilities I created one function with jQuery

    Try below code

    $(".firstLetterCaps").each(function () {
    let firstChar = $(this).text().trim();
    let stringElement = $(this).find("*").eq(1);
    let stringElementText = stringElement.html().slice(1);

    stringElement.html(stringElementText);
    $(this).children(".capLetter").html(firstChar.charAt(0));
});
    .firstLetterCaps{
    width: 100px;
    float: left;
    padding: 10px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="firstLetterCaps">
    <div class="capLetter"></div>
    <h2>Test text <img src="./test.png" /></h2>
</div>
<div class="firstLetterCaps">
    <div class="capLetter"></div>
    <p>Great <em>communications</em>, great <em>design</em> and great <em>results</em> starts with <em>well considered thinking</em></p>
</div>
<div class="firstLetterCaps">
    <div class="capLetter"></div>
    <h2>Demo text </h2><h2>Test text</h2>
</div>


  2. 0

    Previous answer gets the issue if the first element comes the <img /> tag then it will not works. So I tried to hide the first char with css.

    Try below code

    var mystring = document.querySelectorAll(".mystring");
var letter = document.querySelectorAll(".letter");

for (var i = 0; i < mystring.length; i++) {
    const nameletter = mystring[i].textContent.trim();
    letter[i].innerHTML = nameletter.charAt(0);
}
    .mystring::first-letter,
.mystring ::first-letter {
    font-size: 0px;
}
    <div class="firstLetterCaps">
    <h1 class="letter"></h1>
    <div class="mystring"><img src="./test.png" />
        <h2>Welcome to WordPress. This is your first post. Edit or delete it, then
            start writing</h2>
    </div>
</div>
<div class="firstLetterCaps">
    <h1 class="letter"></h1>
    <div class="mystring">This is your first post. Edit or delete it, then start writing!</div>
</div>
<div class="firstLetterCaps">
    <h1 class="letter"></h1>
    <div class="mystring">Great <em>communications</em>, great <em>design</em> and great <em>results</em> starts with
        <em>well considered thinking</em>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search