V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
misaka20
V2EX  ›  问与答

求助正则的大神,想实现点击 p 标签中的单词,并 alert 出这个单词。

  •  
  •   misaka20 · 2018-05-25 08:56:23 +08:00 · 1032 次点击
    这是一个创建于 2161 天前的主题,其中的信息可能已经有所发展或是发生改变。

    下面是我的解决办法,但是最终答不到想要的效果

    • 文章部分
    <p>
        In the browser
    </p>
    <p style="text-align:justify;">
        <span style="font-size: 16px; line-height: 2; font-family: Tahoma; background-color: rgb(255, 229, 0);">
            In conclusion, the polysaccharides from two seaweeds, Porphyra&nbsp;haitanensis and Enteromorpha prolifera changed significantly
            fecal microbiota content among the three groups at all levels.
            <strong>The results suggest that polysaccharide type</strong> and glycoside may contribute to shaping&nbsp;mice gut microbiota.
            Furtherly, we will determent their effect on fecal&nbsp;microbiota in the treatment of certain diseases.
        </span>
    </p>
    
    • JS 代码,代码的主要逻辑是对每个单词用 i 标签包含起来。
    var p = $('p');
    
    parseHTML(p);
    
    function parseHTML(p) {
        for (var i = 0, length = p.length; i < length; i++) {
            var e = $(p[i]);
            if (e.children().length == 0) {
                e.html(function(index, oldHtml) {
                    return oldHtml.replace(/\b(\w+?)\b/g, '<i class="word">$1</i>')
                });
                e.click(function(event) {
                    if (event.target.tagName === 'I') {
                        alert(event.target.innerHTML);
                    }
                });
            } else {
    
                parseHTML(e.children());
            }
    
        }
    }
    
    • 结果:如下图,由于图片太大,所以 blank 了。红框中的单词实现了 i 标签包含。但是蓝框中,确没有。

    http://photo.weibo.com/1771131114/photos/large/photo_id/4243484310650850/album_id/3483606186757120

    感觉应该有正则可以直接匹配所有的单词,但是又不包含 HTML 标签的部分,求教 V 友有办法解决嘛

    第 1 条附言  ·  2018-05-25 10:00:43 +08:00
    • 答案:
    var p = $('p');
    
    p.html(function(index, oldHtml) {
        return oldHtml.replace(/(<\/?.+?>)|(\b(\w+?)\b)/g, function(tag) {
            console.log(tag);
    
            if (tag.indexOf('<') == -1 && tag.indexOf('nbsp') == -1) {
                return '<i>' + tag + '</i>';
            } else {
                return tag;
            }
        });
    });
    p.click(function(event) {
        if (event.target.tagName === 'I') {
            alert(event.target.innerHTML);
        }
    });
    
    2 条回复    2018-05-25 09:59:54 +08:00
    InternetExplorer
        1
    InternetExplorer  
       2018-05-25 09:55:58 +08:00
    misaka20
        2
    misaka20  
    OP
       2018-05-25 09:59:54 +08:00
    @InternetExplorer 由于是移动端,所以要求是点击,而不是类似于金山划词翻译。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4028 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 05:21 · PVG 13:21 · LAX 22:21 · JFK 01:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.