0

我在搜索和替换整个 HTML 字符串时遇到了一些麻烦。

我在这个小提琴中的例子是我试图用它的所有类和标记替换整个 div 标签。

HTML：

<ul class="slides">
      <li><div class="flex-caption"><strong>Climb to the Top of Your Potential</strong>&nbsp;</div></li>
      <li><div class="flex-caption"><strong>Reach for the Clouds with Simple Solutions</strong>&nbsp;</div></li>
      <li><div class="flex-caption"><strong>Obtain the Courage to Suceed as a Leader, Team, & Company</strong>&nbsp;</div></li>
</ul>

JavaScript：

// This works perfect to search & replace text strings, but not for searching HTML:

jQuery(document).ready(function(){
function makeLink () {
jQuery(".flex-caption").html(function(i, str) {
return str.replace("Climb to the Top of Your Potential", "<div class='caption-align'>Climb to the Top of <a href='http://google.com'>Your Potential</a></div>");
});
}makeLink();
});

// Issue #1: This is my failed attempt to search & replace a large portion of the string:

jQuery(document).ready(function(){
function changeString () {
jQuery(".flex-caption").html(function(i, str) {
return str.replace("<div class='flex-caption'><strong>Reach for the Clouds with Simple Solutions</strong></div>", "<div class='flex-caption'><strong><div class='caption-align caption-right'>REPLACED TEXT! Reach for the Clouds with Simple Solutions</div></strong>&nbsp;</div>");
});
}changeString();
});

// Issue #2: I don't know why the character "&" is break this, so I tried \u0026 & both CDATA with no avail:

jQuery(document).ready(function(){
function changeString2 () {
jQuery(".flex-caption").html(function(i, str) {
return str.replace("<strong>Obtain the Courage to Suceed as a Leader, Team, \u0026 Company", "<i>Obtain the Courage to Suceed as a Leader, Team, \u0026 Company");
});
}changeString2();
});

http://jsfiddle.net/LqkNE/

如您所见，有两个小问题 - 一个带有 & 符号的问题也给我带来了问题。

我究竟做错了什么？

4

2 回答 2

1

这是一个工作版本：http: //jsfiddle.net/Regisc/jeVjn/

如上所述，&需要编码，对于第一个问题，您可以只替换强部分，因为其余部分不会改变

编辑：

// Issue #1: This is my failed attempt to search & replace a large portion of the string:

jQuery(document).ready(function () {
  function changeString() {
    jQuery(".flex-caption").parent().html(function (i, str) {
      return str.replace(
        '<div class="flex-caption"><strong>Reach for the Clouds with Simple Solutions</strong>&nbsp;</div>', 
        "<div class='flex-caption flex-align'><strong><div class='caption-align caption-right'>REPLACED TEXT! Reach for the Clouds with Simple Solutions</div></strong>&nbsp;</div>"
      );
    });
  }

  changeString();
});

http://jsfiddle.net/jeVjn/1/

注意parent(), 简单的引号和&nbsp;这不起作用，因为.flex-captionhtml<strong>...不是<div class=".flex-caption">...

于 2012-09-02T05:09:16.040 回答
0

&需要编码为&amp;

所以html应该是：

      <li><div class="flex-caption"><strong>Obtain the Courage to Suceed as a Leader, Team, &amp; Company</strong>&nbsp;</div></li>

和 JavaScript：

jQuery(document).ready(function(){
  function changeString2 () {
    jQuery(".flex-caption").html(function(i, str) {
      return str.replace("<strong>Obtain the Courage to Suceed as a Leader, Team, &amp; Company", "<i>Obtain the Courage to Suceed as a Leader, Team, &amp; Company");
    });
  }
  changeString2();
});
于 2012-09-02T05:04:06.937 回答