如何获取任何html标签的字符串的第一个字符并绑定到php中的其他标签？

4sup72z8 于 2023-04-28 发布在 PHP

关注(0)|答案(2)|浏览(87)

如何使用php实现以下场景？

案例一

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

案例二

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

案例三

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

在输入html中可能会有这么多的标签将被包括在内。我希望任何第一块举行的html

下面代码我已经试过了

<?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); ?>

php

来源：https://stackoverflow.com/questions/76117741/how-can-get-first-character-of-string-of-any-html-tag-and-bind-to-other-tag-in-p

2条答案

按热度按时间

ztigrdn81#

在跟踪了这么多可能性之后，我用jQuery创建了一个函数

试试下面的代码

$(".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>

赞(0）回复(0）举报 2023-04-28

zqdjd7g92#

前面的答案得到的问题是，如果第一个元素是<img />标签，那么它将不起作用。所以我试图用css隐藏第一个字符。

试试下面的代码

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>

赞(0）回复(0）举报 2023-04-28

我来回答

如何获取任何html标签的字符串的第一个字符并绑定到php中的其他标签？

案例一

案例二

案例三

下面代码我已经试过了

2条答案

试试下面的代码

试试下面的代码

相关问题

热门标签

最新问答