如何替换 html 标签内的值？

How replace the value inside a html tag?

我想用 $tagsReplace 数组中定义的内容替换元素内容，但 preg_replace 有问题，我当前的想法：

$tagsReplace = array(
    'header' => 'header',
    'tag1' => 'this is tag1',
    'tag2' => 'this is tag2',
    'tag3' => 'this is tag3',
    'footer' => 'footer',
); 

$content = '
<!DOCTYPE html>
<hthml>
<header data-edit="true" data-tag-id="header"></header>
<div data-edit="true" data-tag-id="tag1"></div>
<div data-edit="true" data-tag-id="tag2"></div>
<div data-edit="true" data-tag-id="tag3"></div>
<footer data-edit="true" data-tag-id="footer"></footer>
</html>
';

$dom = new DOMDocument();
libxml_use_internal_errors(true);
$dom->loadHTML($content);
$xpath = new DomXpath($dom);

foreach ($xpath->query('//*[@data-edit="true"]') as $rowNode) { 
    $tagID = $rowNode->getAttribute('data-tag-id');
    $content = preg_replace('/(<div.*?data-edit="true"[^>]*>)(.*?)(<\/div>)/i', ''. $tagsReplace[$tagID] . '', $content);
}
echo $content;

我想要的是这样的输出：

<!DOCTYPE html>
<hthml>
<header data-edit="true" data-tag-id="header">header</header>
<div data-edit="true" data-tag-id="tag1">this is tag1</div>
<div data-edit="true" data-tag-id="tag2">this is tag2</div>
<div data-edit="true" data-tag-id="tag3">this is tag3</div>
<footer data-edit="true" data-tag-id="footer">footer</footer>
</html>

当前输出为：

 <!DOCTYPE html>
<hthml>
<header data-edit="true" data-tag-id="header"></header>
<div data-edit="true" data-tag-id="tag1">footer</div>
<div data-edit="true" data-tag-id="tag2">footer</div>
<div data-edit="true" data-tag-id="tag3">footer</div>
<footer data-edit="true" data-tag-id="footer"></footer>
</html>

所有包含属性 data-edit="true" 和 data-tag-id 的元素都必须将其中的内容替换为 arra $tagsReplace 中定义的 tagid 值。

您不能总是用同一个赞助人替换，因为您有 3 个不同的标签。

看看这段代码：

<?php

$tagsReplace = array(
    'header' => 'header',
    'tag1' => 'this is tag1',
    'tag2' => 'this is tag2',
    'tag3' => 'this is tag3',
    'footer' => 'footer',
); 

$content = '
<!DOCTYPE html>
<html>
<header data-edit="true" data-tag-id="header"></header>
<div data-edit="true" data-tag-id="tag1"></div>
<div data-edit="true" data-tag-id="tag2"></div>
<div data-edit="true" data-tag-id="tag3"></div>
<footer data-edit="true" data-tag-id="footer"></footer>
</html>
';

$dom = new DOMDocument();
libxml_use_internal_errors(true);
$dom->loadHTML($content);
$xpath = new DomXpath($dom);

$html = explode("\n", trim($content));
$i = 2;

foreach ($xpath->query('//*[@data-edit="true"]') as $rowNode) { 
    $tagID = $rowNode->getAttribute('data-tag-id');

    switch ($rowNode->nodeName) {
        case 'header':
        $html[$i] = preg_replace('/(<header.*?data-edit="true"[^>]*>)(.*?)(<\/header>)/i', ''. $tagsReplace[$tagID] . '', $html[$i]);
        break;

        case 'div':
        $html[$i] = preg_replace('/(<div.*?data-edit="true"[^>]*>)(.*?)(<\/div>)/i', ''. $tagsReplace[$tagID] . '', $html[$i]);
        break;  

        case 'footer':
        $html[$i] = preg_replace('/(<footer.*?data-edit="true"[^>]*>)(.*?)(<\/footer>)/i', ''. $tagsReplace[$tagID] . '', $html[$i]);
        break;  
    }   
    $i++;
}

$content = implode("\n", $html);

echo $content;

?>

要获得您想要的结果，您可以遍历替换数组并在同一个 XPath 查询中搜索 data-edit = true 和 data-tag-id = <key>，然后替换节点值。这样你就不必使用 preg_replace 了。

$content = '
<!DOCTYPE html>
<html>
<header data-edit="true" data-tag-id="header"></header>
<div data-edit="true" data-tag-id="tag1"></div>
<div data-edit="true" data-tag-id="tag2"></div>
<div data-edit="true" data-tag-id="tag3"></div>
<footer data-edit="true" data-tag-id="footer"></footer>
</html>
';

$tagsReplace = array(
    'header' => 'header',
    'tag1'   => 'this is tag1',
    'tag2'   => 'this is tag2',
    'tag3'   => 'this is tag3',
    'footer' => 'footer',
);

$dom = new DOMDocument();
libxml_use_internal_errors(true);
$dom->loadHTML($content);
$xpath = new DomXpath($dom);

foreach ($tagsReplace as $key => $value) {
    $nodes = $xpath->query(
        '//*[@data-edit="true" and @data-tag-id="' . $key . '"]'
    );

    if ($nodes->length) {
        $nodes->item(0)->nodeValue = $value;
    }
}

$dom->formatOutput = true;
echo $dom->saveHTML();

输出：

<!DOCTYPE html>
<html><body>
<header data-edit="true" data-tag-id="header">header</header>
<div data-edit="true" data-tag-id="tag1">this is tag1</div>
<div data-edit="true" data-tag-id="tag2">this is tag2</div>
<div data-edit="true" data-tag-id="tag3">this is tag3</div>
<footer data-edit="true" data-tag-id="footer">footer</footer>
</body></html>

试试这个，它接受任何类型的标签

$tagsReplace = array(
    'header' => 'header',
    'tag1' => 'this is tag1',
    'tag2' => 'this is tag2',
    'tag3' => 'this is tag3',
    'footer' => 'footer',
); 

$content = '
<!DOCTYPE html>
<html>
<header data-edit="true" data-tag-id="header"></header>
<div data-edit="true" data-tag-id="tag1"></div>
<div data-edit="true" data-tag-id="tag2"></div>
<div data-edit="true" data-tag-id="tag3"></div>
<footer data-edit="true" data-tag-id="footer"></footer>
</html>
';

$dom = new DOMDocument();
libxml_use_internal_errors(true);
$dom->loadHTML($content);
$xpath = new DomXpath($dom);

foreach ($xpath->query('//*[@data-edit="true"]') as $rowNode) {
    $tagID = $rowNode->getAttribute('data-tag-id');
    $content = preg_replace('/(<(.*?) [^>]*?data-tag-id="'.$tagID.'"[^>]*>)(.*?)(<\/>)/i', ''. $tagsReplace[$tagID] . '', $content);
}
echo $content;

foreach ($xpath->query('//*[@data-edit="true"]') as $rowNode) {
    $rowNode->nodeValue = $tagsReplace[$rowNode->getAttribute('data-tag-id')];
}
echo $dom->saveHTML();

因为你在指定 div 在你的 preg_match 模式中 我们知道第一个元素以 header 开头，所以它不会被匹配 因此，只需将 preg_match 模式开头的 "div" 替换为 (.*?) 即可匹配 header 甚至其他单词。 这：

$content = preg_replace('/(<div.?data-edit="true"[^>]>)(.*?)(

)/i', '$1'. $tagsReplace[$tagID] . '$3', $content);

变成：

$content = preg_replace('/(<(.*?) data-edit="true"[^>]>)(.?)(

)/i', '$1'. $tagsReplace[$tagID] . '$3', $content);

还有另一个选项可用，您可以使用 preg_replace_callback(pattern,function,subject) 神奇地做您想做的事，这是一个对我有用的解决方案: 

$content = '
<!DOCTYPE html>
<hthml>
<header data-edit="true" data-tag-id="header"></header>
<div data-edit="true" data-tag-id="tag1"></div>
<div data-edit="true" data-tag-id="tag2"></div>
<div data-edit="true" data-tag-id="tag3"></div>
<footer data-edit="true" data-tag-id="footer"></footer>
</html>
';

$pattern = '/<(.+) data-edit="true" data-tag-id="(.*)"(.*?)>(.*?)<\/(.+)>/';
$another = preg_replace_callback($pattern, function($matches){
    $tagsReplace = array(
        'header' => 'header1',
        'tag1' => 'this is tag1',
        'tag2' => 'this is tag2',
        'tag3' => 'this is tag3',
        'footer' => 'footer',
    ); 
    return '<'.$matches[1].' data-edit="true" data-tag-id="'.$matches[2].'"'.$matches[3].'>'.$tagsReplace[$matches[2]].'<\/'.$matches[5].'>/';
}, $content);
# before the replacement 
print_r($content);
echo '\n';
// another holds the content after replacement 
print_r($another);

不要将 RegEx 用于 parse/change HTML 或 XML。您已经使用了 DOM，那么为什么不用它来更改文档呢？

$dom = new DOMDocument();
libxml_use_internal_errors(true);
$dom->loadHTML($content);
$xpath = new DOMXPath($dom);

foreach ($xpath->evaluate('//*[@data-edit="true"]') as $rowNode) {
  // read id attribute 
  $tagId = $rowNode->getAttribute('data-tag-id');
  // remove all child nodes
  $rowNode->nodeValue = '';
  // if here is a new content available
  if (isset($tagsReplace[$tagId])) {
      // create a text node and append it
      $rowNode->appendChild(
         $dom->createTextNode($tagsReplace[$tagId])
      );
  }
}
echo $dom->saveHtml();

输出（格式化）：

<!DOCTYPE html>
<html>
  <body>
    <header data-edit="true" data-tag-id="header">header</header>
    <div data-edit="true" data-tag-id="tag1">this is tag1</div>
    <div data-edit="true" data-tag-id="tag2">this is tag2</div>
    <div data-edit="true" data-tag-id="tag3">this is tag3</div>
    <footer data-edit="true" data-tag-id="footer">footer</footer>
  </body>
</html>

警告！：您 HTML 看起来像 HTML5，并且与 PHP DOM 不完全兼容执行。您可能需要 library 到 import/export HTML5 到 DOMDocument as XHTML.