隐藏/显示元素和所有子元素中的非首字母-jQuery

时间:2018-12-25 18:42:57

标签: javascript jquery

我只想在div中隐藏/显示所有非首字母,并在单击时隐藏所有子节点

文本目标:

  

37耶稣回答:“‘尽心,尽性,尽意爱主你的上帝。’[a] 38这是第一和最大的诫命。 39第二个是这样的:“爱邻居如己。” [b]

点击:

  

37 J____ r _____:“‘L___ t__ L___ y__ G__ w___ a__ y___ h___ a__ w___ a__ y__ s__ a__ w___ a__ y__ m ___。” [a] 38 T___ i_ t__ f_____ a__ g__________ c_______。 39 A__ t__ s_______ i_ l___ i _:“ L___ y___ n_________ a_ y _______。” [b]

如果再次单击,请显示原图。

var original=$('#votd').html();
function isLetter(chr){
   return chr.toUpperCase()!=chr.toLowerCase();
}
$('#votd').on('click', function() {
text=$(this).text();
if (!text.includes('_')){
    $(this).find('*').each(function(index,value){
		str=$(this).text();
		newStr='';
		for (var i=0; i<str.length; i++ ) {
			chr=str[i];
			priorChar='';
			isFirstLetterInWord=isLetter(chr)&&!isLetter(priorChar);
			if(i>0){
				if(!isFirstLetterInWord&&isLetter(chr)){
					newStr+='_';
				}else{
					newStr+=chr;
				}
			}else{
				newStr+=chr;
				priorChar=str[i];
			}
		}	
		$(this).text(newStr);
	}
}else{
	$('#votd').html(original);
}		
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="votd"><span><sup>37&nbsp;</sup>Jesus replied: <span>“‘Love the Lord your God with all your heart and with all your soul and with all your mind.’<sup data-fn="#frp-passage-0-23910a" class="footnote" data-link="[<a href=&quot;#frp-passage-0-23910a&quot; title=&quot;See footnote a&quot;>a</a>]">[<a>a</a>]</sup><sup class="crossreference" data-link="(<a href=&quot;#crp-passage-0-23910A&quot; title=&quot;See cross-reference A&quot;>A</a>)" data-cr="#crp-passage-0-23910A"></sup></span></span> <span><span><sup>38&nbsp;</sup>This is the first and greatest commandment.</span></span> <span><span><sup>39&nbsp;</sup>And the second is like it: ‘Love your neighbor as yourself.’<sup data-fn="#frp-passage-0-23912b" class="footnote" data-link="[<a href=&quot;#frp-passage-0-23912b&quot; title=&quot;See footnote b&quot;>b</a>]">[<a>b</a>]</sup><sup class="crossreference" data-link="(<a href=&quot;#crp-passage-0-23912B&quot; title=&quot;See cross-reference B&quot;>B</a>)" data-cr="#crp-passage-0-23912B"></sup></span></span></p>

但是它不起作用,您能帮我吗?预先谢谢你。

2 个答案:

答案 0 :(得分:3)

使用正则表达式/(?<=\b[\w]+)[^\d\W]/g定位要转换的每个字符。然后,使用if(myString === $('#votd').text())验证必须执行的转换。然后,当您必须转换元素值时,将.replace()与您制作的regex一起使用,并将其更改为_字符。如果该值等于原始值,则如下所示将其转换回原始版本。

var regex = /(?<=\b[\w]+)[^\d\W]/g;
myString = $('#votd').text();

$("#votd").on("click", function() {
  if(myString === $('#votd').text()) $('#votd').text(myString.replace(regex, '_'));
  else $('#votd').text(myString);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="votd"><span><sup>37&nbsp;</sup>Jesus replied: <span>“‘Love the Lord your God with all your heart and with all your soul and with all your mind.’<sup data-fn="#frp-passage-0-23910a" class="footnote" data-link="[<a href=&quot;#frp-passage-0-23910a&quot; title=&quot;See footnote a&quot;>a</a>]">[<a>a</a>]</sup><sup class="crossreference" data-link="(<a href=&quot;#crp-passage-0-23910A&quot; title=&quot;See cross-reference A&quot;>A</a>)" data-cr="#crp-passage-0-23910A"></sup></span></span> <span><span><sup>38&nbsp;</sup>This is the first and greatest commandment.</span></span> <span><span><sup>39&nbsp;</sup>And the second is like it: ‘Love your neighbor as yourself.’<sup data-fn="#frp-passage-0-23912b" class="footnote" data-link="[<a href=&quot;#frp-passage-0-23912b&quot; title=&quot;See footnote b&quot;>b</a>]">[<a>b</a>]</sup><sup class="crossreference" data-link="(<a href=&quot;#crp-passage-0-23912B&quot; title=&quot;See cross-reference B&quot;>B</a>)" data-cr="#crp-passage-0-23912B"></sup></span></span></p>

答案 1 :(得分:0)

我使用了@Jonathan Gagne的答案,并修改了一些正则表达式和代码来保留内部html,并仅替换文本。非常感谢

var regex = /(?<=<[^>]+>[^&<>]*[\wáéíóúñ])[^\d\W]|[áéíóúñ]/g;
html = $('#votd').html();
$("#votd").on("click", function() {
  if (html === $('#votd').html())
    $('#votd').html(html.replace(regex, '_'));
  else
    $('#votd').html(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="votd"><span><sup>37&nbsp;</sup>Jesus replied: <span>“‘Love the Lord your God with all your heart and with all your soul and with all your mind.’<sup data-fn="#frp-passage-0-23910a" class="footnote" data-link="[<a href=&quot;#frp-passage-0-23910a&quot; title=&quot;See footnote a&quot;>a</a>]">[<a>a</a>]</sup><sup class="crossreference" data-link="(<a href=&quot;#crp-passage-0-23910A&quot; title=&quot;See cross-reference A&quot;>A</a>)" data-cr="#crp-passage-0-23910A"></sup></span></span>
  <span><span><sup>38&nbsp;</sup>This is the first and greatest commandment.</span></span> <span><span><sup>39&nbsp;</sup>And the second is like it: ‘Love your neighbor as yourself.’<sup data-fn="#frp-passage-0-23912b" class="footnote" data-link="[<a href=&quot;#frp-passage-0-23912b&quot; title=&quot;See footnote b&quot;>b</a>]">[<a>b</a>]</sup><sup class="crossreference" data-link="(<a href=&quot;#crp-passage-0-23912B&quot; title=&quot;See cross-reference B&quot;>B</a>)" data-cr="#crp-passage-0-23912B"></sup></span></span>
</p>