我只想在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 </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="#frp-passage-0-23910a" title="See footnote a">a</a>]">[<a>a</a>]</sup><sup class="crossreference" data-link="(<a href="#crp-passage-0-23910A" title="See cross-reference A">A</a>)" data-cr="#crp-passage-0-23910A"></sup></span></span> <span><span><sup>38 </sup>This is the first and greatest commandment.</span></span> <span><span><sup>39 </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="#frp-passage-0-23912b" title="See footnote b">b</a>]">[<a>b</a>]</sup><sup class="crossreference" data-link="(<a href="#crp-passage-0-23912B" title="See cross-reference B">B</a>)" data-cr="#crp-passage-0-23912B"></sup></span></span></p>
但是它不起作用,您能帮我吗?预先谢谢你。
答案 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 </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="#frp-passage-0-23910a" title="See footnote a">a</a>]">[<a>a</a>]</sup><sup class="crossreference" data-link="(<a href="#crp-passage-0-23910A" title="See cross-reference A">A</a>)" data-cr="#crp-passage-0-23910A"></sup></span></span> <span><span><sup>38 </sup>This is the first and greatest commandment.</span></span> <span><span><sup>39 </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="#frp-passage-0-23912b" title="See footnote b">b</a>]">[<a>b</a>]</sup><sup class="crossreference" data-link="(<a href="#crp-passage-0-23912B" title="See cross-reference B">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 </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="#frp-passage-0-23910a" title="See footnote a">a</a>]">[<a>a</a>]</sup><sup class="crossreference" data-link="(<a href="#crp-passage-0-23910A" title="See cross-reference A">A</a>)" data-cr="#crp-passage-0-23910A"></sup></span></span>
<span><span><sup>38 </sup>This is the first and greatest commandment.</span></span> <span><span><sup>39 </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="#frp-passage-0-23912b" title="See footnote b">b</a>]">[<a>b</a>]</sup><sup class="crossreference" data-link="(<a href="#crp-passage-0-23912B" title="See cross-reference B">B</a>)" data-cr="#crp-passage-0-23912B"></sup></span></span>
</p>