获取父标签之内子标签之外的text

最新推荐文章于 2024-11-01 15:58:16 发布

转载最新推荐文章于 2024-11-01 15:58:16 发布 · 1k 阅读

JavaScript 同时被 3 个专栏收录

193 篇文章

订阅专栏

JQuery

70 篇文章

订阅专栏

HTML

59 篇文章

订阅专栏

本文将介绍如何在SVG元素中精确提取特定文本，避开`<textPath>`标签内的内容，仅聚焦于目标文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标题起的有点绕，举个例子说明：

<text text-anchor="middle">
						<textPath xlink:href="#textpath1" font-size="30" font-family="Brush Script MT" startOffset="50%">August 11. 2013</textPath>
						<textPath xlink:href="#textpath2" font-size="20" font-family="Brush Script MT" startOffset="50%">North Carolina</textPath>
						<textPath xlink:href="#textpath3" x="80" y="310" font-size="20" font-family="Brush Script MT" startOffset="50%">Fayetteville</textPath>
						<textPath xlink:href="#textpath4" font-size="60" font-family="Brush Script MT" startOffset="50%">Williams Family Reunion</textPath>
What I want
					</text>

上面这个SVG中，怎么取到<text>里同时在<textPath>之外的text "What I want"。

我试过$('text').text()，结果是text之内，包括textPath内的所有文字都被取出来了，这并不是我要的。

最后在这里发现了解决方法：http://stackoverflow.com/a/5913203/2177408

 var text = '';
 $('a').contents().each(function(){
    if(this.nodeType === 3){
     text += this.wholeText;
    }
 });
 $("#largemenutop").html(text);

Here's a list of NodeTypes for anyone wondering what '3' means.

顺手把连接里的内容也贴过来吧。

The code

Copy the following code to your JavaScript, adding it before your first use of the constants.

// create the nodeType constants if the Node object is not defined
if (!window.Node){
  var Node =
      {
        ELEMENT_NODE                :  1,
        ATTRIBUTE_NODE              :  2,
        TEXT_NODE                   :  3,
        CDATA_SECTION_NODE          :  4,
        ENTITY_REFERENCE_NODE       :  5,
        ENTITY_NODE                 :  6,
        PROCESSING_INSTRUCTION_NODE :  7,
        COMMENT_NODE                :  8,
        DOCUMENT_NODE               :  9,
        DOCUMENT_TYPE_NODE          : 10,
        DOCUMENT_FRAGMENT_NODE      : 11,
        NOTATION_NODE               : 12
      };
}