【问题标题】:regex to find tag id and content JavaScript正则表达式查找标签 ID 和内容 JavaScript
【发布时间】:2011-03-17 07:26:59
【问题描述】:

嘿,我正在尝试用 javascript 中的正则表达式做一些非常具体的事情,而我的 regexp-foo 充其量是不稳定的。想知道是否有任何专业人士可以为我指明正确的方向。所以我有一些文字...

<item id="myid1">myitem1</item>
<item id="myid2">myitem2</item>

...等

我想把它剥离成一个数组,读取 myid1, myitem1, myid2, myitem2, ....etc

永远不会有嵌套元素,因此不存在递归嵌套问题。任何人都可以快速解决这个问题? 感谢您的帮助!

【问题讨论】:

  • 你能写一个更好的myitem1 myitem2 ...等结构的解释,还是一个简单的空格分隔的字符串列表?

标签: javascript regex elements


【解决方案1】:

这是一个正则表达式:

  • 匹配开始和结束标记元素名称
  • 提取id属性的值
  • 提取标签内部的html内容

注意: 我懒得在这里匹配属性值。需要用双引号括起来,属性名和值之间不能有空格。

<([^\s]+).*?id="([^"]*?)".*?>(.+?)</\1>

在 javascript 中运行正则表达式如下:

search = '<item id="item1">firstItem</item><item id="item2">secondItem</item>';
regex = new RegExp(/<([^\s]+).*?id="([^"]*?)".*?>(.+?)<\/\1>/gi);
matches = search.match(regex);
results = {};
for (i in matches) {
    parts = regex.exec(matches[i]);
    results[parts[2]] = parts[3];
}

最后,results 将是一个看起来像这样的对象:

{
    "item1": "firstItem",
    "item2": "secondItem"
}

如果 元素包含嵌套的 HTML,则为 YMMV。

【讨论】:

  • 太好了,谢谢!将 re 更改为... /]*id=["'](.*?)["']>(.*?)/gi 并且似乎可以正常工作:-)
  • 感谢@Thomas 和 Chris,这个帮助人 id=myID&gt;(.*?)&lt;\/tag&gt;
【解决方案2】:

如果有人真的喜欢或需要使用 Regex 通过 id 获取 HTML 标记(如问题主题中的),他可以使用我的代码:

function GetTagByIdUsingRegex(tag,id,html) {
    return new RegExp("<" + tag + "[^>]*id[\\s]?=[\\s]?['\"]" + id + "['\"][\\s\\S]*?<\/" + tag + ">").exec(html);
}

我还做了一个按类名获取元素:

function GetTagByClassUsingRegex(tag,cls,html) {
    return new RegExp("<" + tag + "[^>]*class[\\s]?=[\\s]?['\"]" + cls + "[^'\"]*['\"][\\s\\S]*?<\/" + tag + ">").exec(html);
}

【讨论】:

  • 它不适用于嵌套标签。如果你在 div 中有 div,它将把第一个关闭的
    标记视为表达式的结尾
【解决方案3】:

我总是使用这个网站来构建我的正则表达式:

http://www.pagecolumn.com/tool/regtest.htm

这是我想出的正则表达式:

(<[^>]+>)([^<]+)(<[^>]+>)

这是页面给我的 JavaScript 结果

使用 RegExp 对象:

var str = "<item id="myid1">myitem1</item><item id="myid2">myitem2</item><ssdad<sdasda><>dfsf";
var re = new RegExp("(<[^>]+>)([^<]+)(<[^>]+>)", "g");
var myArray = str.match(re);

使用文字:

var myArray = str.match(/(<[^>]+>)([^<]+)(<[^>]+>)/g)

if ( myArray != null) {
    for ( i = 0; i < myArray.length; i++ ) { 
        var result = "myArray[" + i + "] = " + myArray[i];
    }
}

【讨论】:

    【解决方案4】:

    这是一个 xml 字符串。在我看来,XML 解析器 似乎最适合这种任务。执行以下操作:

    var items = document.getElementsByTagName("item") ; //<> use the parent element if document is not
    var dataArray = [ ] ;
    
    for(var n = 0 ; n < items.length ; n++) {
    
         var id = items[n].id ;
         var text = items[n].childNodes[0] ;
    
             dataArray.push(id,text) ;
    
    }
    

    如果您的问题是无法将 xml 字符串转换为 xml 对象,则必须事先使用 DOM 解析器

    var xmlString = "" ; //!! your xml string
    var document = null ;
    
        if (window.ActiveXObject) { //!! for internet explorer
    
                document = new ActiveXObject("Microsoft.XMLDOM") ;
                document.async = "false" ;
                document.loadXML(xmlString) ;
    
        } else { //!! for everything else
    
            var parser = new DOMParser() ;
                document = parser.parseFromString(xmlString,"text/xml") ;
    
        }
    

    然后使用上面的脚本。

    【讨论】:

    • 使用 xml 解析器将是理想的解决方案,但不幸的是我无法访问 dom 操作,这对于这个问题来说有点矫枉过正。不过谢谢!
    • 好吧,就我而言,提出正则表达式模式会持续更长时间。此外,由于您拥有 XML 字符串,因此您可以通过构建 DOM 对象进行 dom 访问,如所述。无论如何,不​​客气!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2010-10-01
    • 1970-01-01
    • 2014-12-20
    • 2013-05-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多