![](/img/trans.png)
[英]Wrap html <a> tag around a twitter username in a tweet with php
[英]Wrap HTML Tag around strings in HTML code
我正在使用 PHP 7.3+。 我想在我的 HTML 代码中的每个字母周围包装不同的 HTML 标签,但只在文本周围,而不是其他 HTML 标签。 例如:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<h1>This is the first heading</h1>
<p>Some Paragraph</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<script src="js/scripts.js"></script>
</body>
</html>
我基本上想将<span class="customclass"></span>
包裹在网站文本的每个字母周围。 哪个是:
This is the first heading
Some Paragraph
List item 1
List item 2
这是预期的 output:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<h1><span class="customclass">T</span><span class="customclass">h</span><span class="customclass">i</span><span class="customclass">s</span> <span class="customclass">i</span><span class="customclass">s</span> <span class="customclass">t</span><span class="customclass">h</span><span class="customclass">e</span> <span class="customclass">f</span><span class="customclass">i</span><span class="customclass">r</span><span class="customclass">s</span><span class="customclass">t</span> <span class="customclass">h</span><span class="customclass">e</span><span class="customclass">a</span><span class="customclass">d</span><span class="customclass">i</span><span class="customclass">n</span><span class="customclass">g</span></h1>
<p><span class="customclass">S</span><span class="customclass">o</span><span class="customclass">m</span><span class="customclass">e</span> <span class="customclass">P</span><span class="customclass">a</span><span class="customclass">r</span><span class="customclass">a</span><span class="customclass">g</span><span class="customclass">r</span><span class="customclass">a</span><span class="customclass">p</span><span class="customclass">h</span></p>
<ul>
<li><span class="customclass">L</span><span class="customclass">i</span><span class="customclass">s</span><span class="customclass">t</span> <span class="customclass">i</span><span class="customclass">t</span><span class="customclass">e</span><span class="customclass">m</span> <span class="customclass">1</span></li>
<li><span class="customclass">L</span><span class="customclass">i</span><span class="customclass">s</span><span class="customclass">t</span> <span class="customclass">i</span><span class="customclass">t</span><span class="customclass">e</span><span class="customclass">m</span> <span class="customclass">2</span></li>
</ul>
<script src="js/scripts.js"></script>
</body>
</html>
我有这个正则表达式,但它只是把它包裹在最后两个词上,我需要的是每个字母:
preg_replace('/\b[\w\'-]+\W+\K.*\S/s', '<span class="customclass">$0</span>', $html);
PHP 怎么可能?
此代码获取 HTML 文档的正文,然后递归查找元素和这些元素中的文本。 如果找到,它将每个字母包装在一个跨度标签中。
这支持自定义标签,并且只影响文档<body>
中的 HTML。
$string ='<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<h1>This is the first heading</h1>
<p>Some Paragraph</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<script src="js/scripts.js"></script>
</body>
</html>';
$previous_value = libxml_use_internal_errors(TRUE);
$dom = new DOMDocument();
$dom->loadHTML($string);
$body = $dom->getElementsByTagName('body')->item(0);
foreach ($body->getElementsByTagName('*') as $element) {
replaceText($element);
}
$html = html_entity_decode($dom->saveHTML());
libxml_clear_errors();
libxml_use_internal_errors($previous_value);
function replaceText(DOMNode $node) {
if ($node instanceof DOMText) {
$newString = '';
foreach(str_split($node->nodeValue) as $char) {
if (!trim($char)) {
continue;
}
$newString .= sprintf('<span class="customclass">%s</span>', $char);
}
$node->nodeValue = $newString;
return $node;
}
if ($node->hasChildNodes()) {
foreach($node->childNodes as $childNode) {
return replaceText($childNode);
}
}
}
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<h1><span class="customclass">T</span><span class="customclass">h</span><span class="customclass">i</span><span class="customclass">s</span><span class="customclass">i</span><span class="customclass">s</span><span class="customclass">t</span><span class="customclass">h</span><span class="customclass">e</span><span class="customclass">f</span><span class="customclass">i</span><span class="customclass">r</span><span class="customclass">s</span><span class="customclass">t</span><span class="customclass">h</span><span class="customclass">e</span><span class="customclass">a</span><span class="customclass">d</span><span class="customclass">i</span><span class="customclass">n</span><span class="customclass">g</span></h1>
<p><span class="customclass">S</span><span class="customclass">o</span><span class="customclass">m</span><span class="customclass">e</span><span class="customclass">P</span><span class="customclass">a</span><span class="customclass">r</span><span class="customclass">a</span><span class="customclass">g</span><span class="customclass">r</span><span class="customclass">a</span><span class="customclass">p</span><span class="customclass">h</span></p>
<ul>
<li><span class="customclass">L</span><span class="customclass">i</span><span class="customclass">s</span><span class="customclass">t</span><span class="customclass">i</span><span class="customclass">t</span><span class="customclass">e</span><span class="customclass">m</span><span class="customclass">1</span></li>
<li><span class="customclass">L</span><span class="customclass">i</span><span class="customclass">s</span><span class="customclass">t</span><span class="customclass">i</span><span class="customclass">t</span><span class="customclass">e</span><span class="customclass">m</span><span class="customclass">2</span></li>
</ul>
<script src="js/scripts.js"></script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.