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

Question

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

案例1

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

案例2

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

案例3

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

Answer 1

嘿，你可以尝试使用 JS，就像你将通过选择器获取元素一样。所以这个案例用JS获取第一个字符比较靠谱。

我已经为每次出现添加了 h1 标签，它将由 js 函数设置。另外，每个段落中的字母都不会被删除，这就是为什么我们将字体大小设为 0。

尝试下面的代码

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>