选择 h2 标签的前两个单词并换行 span 标签

Select first two words of h2 tag and wrap in span tag

本文关键字：标签 单词 两个 换行 span h2 选择      更新时间：2023-09-26

我想在页面上找到所有 h2 标签，然后将前两个单词包装在一个 span 标签中。我已经检查了这个堆栈溢出问题，但它对我没有帮助。

我能够按照此链接和 dd 跨度到前 2 个单词进行操作，但唯一的问题是，如果我在 h2 标签中有 html，例如我在 h2 标签内有超链接。

任何人都可以帮助我如何制作此代码，以便忽略html并仅考虑前两个单词？

任何帮助真的非常感谢！

<小时 />

我的小提琴 ：

JSFiddle

<小时 />

我的 JS ：

jQuery(document).ready(function($){ 
    jQuery('h2').html(function (i, html) {
        return html.replace(/('w+'s'w+)/, '<span>$1</span>')
    });
});
<小时 />

我的网页 ：

<h2>
    <a title="test post 2" href="#">
        test text dolor sit enum
    </a>
</h2>
<h2>lorem ipsum dolor sit enum</h2>

这应该适合您。 

jQuery(document).ready(function($){ 
  jQuery('h2').html(function (i, html) {
    if(/<[a-z]['s'S]*>/i.test(html)) {
      html = jQuery.parseHTML(html);
      return html[0].innerHTML.replace(/('w+'s'w+)/, '<span>$1</span>');
    }
    return html.replace(/('w+'s'w+)/, '<span>$1</span>');
  });
});
h2 {
  color:#f2f2f2;
}
h2 span {
  color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2><a title="test post 2" href="#">test text dolor sit enum</a></h2>
<h2>lorem ipsum dolor sit enum</h2>

使用 text() 函数：

jQuery(document).ready(function($){ 
  jQuery('h2').text(function (i, txt) {
    console.log ( txt.replace(/('w+'s'w+)/, '<span>$1</span>'))
  });
});

看这里： https://jsfiddle.net/spdthfgx/

$(function(){
    var h2 = $('h2 > a').html();
    alert(h2.replace(/('w+'s'w+)/, '<span>$1</span>'));
});

https://jsfiddle.net/y3llowjack3t/jornvLee/3/

var h2 = $('h2').html().split(' ');
$('span').html(h2[0] + ' ' + h2[1]);
使用 JQuery 获取 HTML 中的文本，

然后使用 text() 和 match 查找前 2 个单词，最后用 <span> 替换 HTML 中的文本

： 
$(document).ready(function($){ 
  $('h2').html(function (i, html) {
    var text = $($.parseHTML(html)).text().match(/'w+'s'w+/)[0];
    return html.replace(text, '<span>'+text+'</span>');;
  });
});

https://jsfiddle.net/j4fd86aw/6/

相关文章：