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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2378 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

文章部分

<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);
    }
});

length

单词

microbiota

parsehtml

2 条回复 • 2018-05-25 09:59:54 +08:00

InternetExplorer

2018-05-25 09:55:58 +08:00

高亮选中可以吗 http://lmgtfy.com/?q=js+get+selected+word

misaka20

2018-05-25 09:59:54 +08:00

@InternetExplorer 由于是移动端，所以要求是点击，而不是类似于金山划词翻译。