如何用CSS JS隐藏标签中的英文部分只保留中文？

lbhl

  G; r+ f) l/ `1 [# u( S
<span class="word">
8 r( J; D" S* o        very <span class="red"> neat </span>  and clean
& b; P- n5 T/ M6 b        <span class="chn">整洁的, <span class="bold" 干净</span>的</span>
5 }& m& Z+ O. s, H) w7 ?1 o& E</span>
8 G$ j, P1 ?2 F" m2 }
7 L' n! v' r" |2 \每个词头中英释义在一个span.word标签中。
8 y# |3 n/ Q0 ?4 ~" S里面的全部中文释义用仅一个span.chn标签围绕，span.chn标签中可以有子标签如例中span.bold。其余部分是英文释义。英文释义的文本也可以有各种样式修饰如例中red样式，但英文释义绝对不会出现在span.chn中。

. a- I, ]' n0 C2 j" [0 u4 y如何用css,javascript,jquery等方法，将英文部分隐藏，仅显示中文部分？即，最后转换完的效果：

( e5 z5 w9 U+ |" f* e& e3 B0 ~# i6 W<span class="word">
        <span class="chn">整洁的, <span class="bold" 干净</span> 的</span>
0 Q1 c. \0 }% J- p+ [/ k9 Q</span>
7 e8 D2 e; V; x/ C" T# y4 f
/ y4 w+ c  B- ?3 u  f! N! i! M因为英文释义部分没有标签围绕，貌似不大好处理。我用jquery的 addclass方法在最外层span动态加一个事先定义的样式 .hide {display: none;}，再在中文释义标签上动态加一个内联样式 display:inline。这样中文释义样式的两个设置是冲突的，一个是inline即显示，一个是从外层span.hide继承的none不显示，此时根据CSS冲突解决机制应该是内联样式设置优先，中文释义最终将不会被隐藏，被隐藏的只有英文部分，效果就达到了。
! E4 j  ~% _5 ]' S
) h+ m8 e) c$ V! |8 y4 t. u; {哪知，上词典软件一试根本不是这么回事，中文和英文全部都被隐藏了。

$("span.word").addClass("hide");
0 I) Q5 Z# Q0 L* [$("span.chn").css("display","inline");

哪位前辈指点一下，谢谢！

mtaa

( b9 X; {5 d: T% q  r# z5 ?/ S8 I中英混合的span.word标签下，有4个子节点，分别是text, span.red, text, span.chn。你可以通过el.childNodes遍历删掉不需要的节点就好了，el是span.word，删除节点用el.removeChild(el.childNodes[0])。担心删错的话，可以先确定子节点的nodeType和className。

5 s+ {9 r* j9 G: C( O; H

lbhl

mtaa 发表于 2020-2-13 00:05
/ L2 c8 m4 ?8 n9 v) \中英混合的span.word标签下，有4个子节点，分别是text, span.red, text, span.chn。你可以通过el.childNode ...

7 A6 Q) O2 L! c& w/ y( ?( p谢谢指点！但是我的本意只是临时切换到仅显示中文而非永久性删除英文。象您这种方法删除了英文节点只显示中文之后，如果想要再切换回原先中英同在的状态怎么弄呢？
4 T0 u/ D* h  Y. |6 J+ a我在想，如果英文里没有再去嵌套混杂任何标记的话，本可用如下方法：
$ J" G! M$ v: \4 X  _$('span.word').contents().filter(function(){return this.nodeType == Node.TEXT_NODE;})  过滤出英文，然后强行给英文加上一个临时标签且让这个标签display:none。这样如果今后要切换回来只要将刚加上的标签删除就可以。
( v* o1 \1 k4 M无奈，英文中还混有其他标记，不全是Node.TEXT_NODE这个类型。
* A: s; x- z7 e5 S5 s, ^7 @难啊！

mtaa

lbhl 发表于 2020-2-13 15:19
; {% h3 ^& d. H谢谢指点！但是我的本意只是临时切换到仅显示中文而非永久性删除英文。象您这种方法删除了英文节点只显示 ...

可以遍历el.childNodes，通过判断span.chn区分节点类型，用三个array分别存英文，中文，英文节点的字符串，最后给英文array加上临时标签，把所有节点拼字符串一起放回innerHTML里。