javascript - 如何在包含粗体和斜体标签的情况下获取字符串的第一个文本节点？

Question

1. 字符串是动态的

2. 源于用户点击dom任意位置时的onclick事件

3. 如果字符串的第一部分是:

   "login<b>user</b>account "

包含在这样的元素中:

"<div>login<b>user</b>account</div> ",

然后我可以用这个得到它:

alert($(s).find('*').andSelf().not('b,i').not(':empty').first().html());
// result is : login<b>user</b>account

但是当它没有包含在任何元素中时，我怎么能在这种情况下得到相同的结果。什么时候没有包含在任何元素中？

我尝试了下面的代码，当第一部分不包含任何 <b></b> 时它工作正常但它只在包含这些标签时提供“登录”。

 var s = $.trim('login<b>user</b> account<tbody> <tr> <td class="translated">Lorem ipsum dummy text</td></tr><tr><td class="translated">This is a new paragraph</td></tr><tr><td class="translated"><b>Email</b></td></tr><tr><td><i>This is yet another text</i></td> </tr></tbody>');

    if(s.substring(0, s.indexOf('<')) != ''){
       alert(s.substring(0, s.indexOf('<')));
    }

注意: 建议一个不特定于上述字符串的通用解决方案。它应该适用于有粗体标签和没有粗体标签的情况。

Answer 1

所以它只是一个 b 或一个 i，嘿？

递归函数总是要走的路。而这一次，这可能是最好的方式。

var s = function getEm(elem) {
    var ret = ''

    // TextNode? Great!
    if (elem.nodeType === 3) {
        ret += elem.nodeValue;
    }

    else if (elem.nodeType === 1 &&
        (elem.nodeName === 'B' || elem.nodeName === 'I')) {

        // Element? And it's a B or an I? Get his kids!
        ret += getEm(elem.firstChild);
    }

    // Ain't nobody got time fo' empty stuff.
    if (elem.nextSibling) {
        ret += getEm(elem.nextSibling);
    }

    return ret;
}(elem);

Jsfiddle 演示了这一点:http://jsfiddle.net/Ralt/TZKsP/

PS:使用正则表达式或自定义分词器解析 HTML 是不好的，不应该这样做。