Question

我有这行文字

<p>"May you live all the days of your life." — Jonathan Swift</p>

如何将这部分“ - Jonathan Swift”包裹起来，结果如下：

<p>"May you live all the days of your life." <span>— Jonathan Swift</span></p>

Answer 1

您可以将 String#replace 与 html() 方法一起使用。

＆＃13;

$('p').html(function(i, v) {
  return v.replace(/\—.*$/, '<span>$&</span>')
});

＆＃13;

p span {
  color: green
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>"May you live all the days of your life." — Jonathan Swift</p>

＆＃13;

或使用 String#substr 方法。

＆＃13;

$('p').html(function(i, v) {
  var ind = v.indexOf('—');
  return v.substr(0, ind) + '<span>' + v.substr(ind) + '</span>';
});

＆＃13;

p span {
  color: green
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>"May you live all the days of your life." — Jonathan Swift</p>

＆＃13;

Answer 2

如何在<br />代码中添加<p>代码？结果代码为：

<p>"May you live all the days of your life." <br />— Jonathan Swift</p>

Answer 3

如果<p>标签内的文字总是以同样的方式格式化（如果它们都以— Author Name结尾），那么你可以用JQuery做这样的事情：

$(document).ready(function () {
    $('p').each(function () {
    var orgText = $(this).html();
    var spanText = orgText.substring(0, (orgText.indexOf('—') -1)) + '<span>' + orgText.substring(orgText.indexOf('—'), orgText.length) + '</span>';

    $(this).html(spanText);
  });
});

警告：此解决方案假定在引号文本中找不到其他—。

请参阅我的jsfiddle示例：https://jsfiddle.net/fictus/cL9qgnms/

如何在符号后包装文本

3 个答案: