jQuery或php在单个节点中查找多个html字符串，并用跨度包装 - jQuery or php find multiple html strings within a single node and wrap with a span

经过一番挖掘，我仍然没有接近这个。

我有一个由这个 php 生成的 html 字符串...

这将去除所有多个空格。

例如上面输出下面的这个字符串，不包含其他节点，只有文本...

 1 Lorem ipsum 1.1 Dolor sit amet, consectetur adipiscing elit. 1.2 Nulla non felis enim, a lacinia erat. 1.3 Donec ullamcorper feugiat lobortis. 1.4 Vivamus congue libero ut augue consectetur ultricies vitae eget quam. 2 Suspendisse 2.1 Ultrices volutpat tempus. 2.2 Aenean ullamcorper porta lacus, ut vehicula tortor dapibus hendrerit. 2.3 Proin condimentum est eget arcu mollis consequat. 2.4 Ut malesuada posuere lobortis. 2.5 Suspendisse gravida adipiscing nunc, et vehicula nunc tincidunt nec. 3 Tincidunt 3.1 Sed eget porta ligula. 3.2 Morbi vitae augue in eros tincidunt tincidunt consequat interdum dui. 3.3 Phasellus ante velit, venenatis et dignissim eu, semper vitae lectus. 3.4 Maecenas feugiat adipiscing tortor, non porttitor sem condimentum luctus. 3.5 Curabitur pharetra gravida ornare. 3.6 Donec tortor erat, posuere in ullamcorper eget, posuere sit amet purus. 3.7 Duis feugiat sollicitudin odio, ac molestie nulla elementum non. 4 Vestibulum 4.1 Tempor lectus sit amet purus condimentum nec condimentum dui viverra. 4.2 Duis sodales molestie fermentum. 4.3 Maecenas euismod, lacus ut ullamcorper condimentum, erat felis sodales lectus, a sodales ipsum lectus eu lorem. 4.3 Vivamus ac rhoncus est.

我试图找到所有数字（1、1.2、1.3 等）并将它们包装在一个跨度中。

我尝试了php，但我运气不佳...

$phrase  = "You should eat fruits, vegetables, and fiber every day.";
$healthy = array("fruits", "vegetables", "fiber");
$yummy   = array("pizza", "beer", "ice cream");
$newphrase = str_replace($healthy, "<span>".$yummy."</span>", $phrase);
echo $newphrase;

上面的 PHP 正在输出这个... You should eat Array, Array, and Array every day.

所以我想我也许可以尝试 jquery，但我不确定我是否正确接近它，请我的代码......

var points = [' 1 ',' 1.1 ',' 1.2 ',' 1.3 ',' 1.4 ',' 2 '];
$("p").html(this.html().replace( points,'<span>' + points + '</span>'));

我想我偏离了轨道，但我真的找不到太多关于针指向特定字符串位的信息。

我做了一个小提琴我的jQuery...http://jsfiddle.net/XmU6p/

我想与此同时，我仍然会追求这个问题。但是，如果有人能分享一些关于我哪里出错的指示，我将不胜感激。谢谢

在这两种情况下，您都需要实际遍历值数组并替换每个值。我对PHP不太熟悉，所以我用jQuery做了一个例子。试试这个：

var points = [' 1 ',' 1.1 ',' 1.2 ',' 1.3 ',' 1.4 ',' 2 '];
$.each(points, function(i, val) {
    var $p = $('p');
    $p.html($p.html().replace(val, '<span>' + val + '</span>'));
});

更新的小提琴

你也可以在PHP中做到这一点。您有一个数组到字符串的转换（ "$yummy" ）。您需要遍历$yummy以添加跨度：

array_walk($yummy, function ($elem) { return "<span>$elem</span>"; });

然后你可以做：

$newphrase = str_replace($healthy, $yummy, $phrase);

你的 PHP 示例失败的原因是$yummy是一个数组，而""是一个字符串。因此，"".$yummy.""行将数组转换为字符串"Array"，然后将其他字符串添加到其两侧，并将其作为单个字符串返回。

由于你想要的是一个数组给str_replace，你需要构造（例如使用foreach循环或array_map()）一个新的数组，其中包含每个元素周围的""和"" - 最终产生类似$yummyWithSpan = array("pizza", "beer", "ice cream");

另一种方法是使用 preg_replace_callback() ，带有添加""和""的回调函数，但随后您需要了解正则表达式的工作原理，这可能是也可能不是您想要进入的东西。

PHP：

$phrase  = "You should eat fruits, vegetables, and fiber every day.";
$healthy = array("fruits", "vegetables", "fiber");
$yummy   = array("pizza", "beer", "ice cream");
foreach ($healthy as $key => $value) {
  $phrase = str_replace($value, "<span>".$yummy[$key]."</span>",$phrase);
}
echo $phrase;

输出：

You should eat <span>pizza</span>, <span>beer</span>, and <span>ice cream</span> every day.

在 PHP 中你不需要循环或行走，你可以使用 str_replace 或 preg_replace，两者都可以处理数组：

<?php
  $phrase  = "You should eat fruits, vegetables, and fiber every day.";
  $yummy   = array("<span>pizza</span>", "<span>beer</span>", "<span>ice cream</span>");
  // regex variant...
  $healthy = array('/fruits/i', '/vegetables/i', '/fiber/i');      
  $newphrase = preg_replace($healthy, $yummy, $phrase);
  echo $newphrase;
  // string variant...
  $healthy = array('fruits', 'vegetables', 'fiber');
  $newphrase = str_replace($healthy, $yummy, $phrase);
  echo $newphrase;
?>

我更喜欢正则表达式变体（preg_replace），在匹配方面具有更大的灵活性。

foreach ($healthy as $key => $food) {
 $newphrase = str_replace($food,'<span>'.$yummy[$key].'</span>',$phrase);
}

echo $newphrase;