如何在包含粗體和斜體標簽的同時獲取字符串的第一個文本節點？

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很不好，因此不應該這樣做。

Answer 2

您正在嘗試檢索直到不是<b>或<i>的第一個元素的所有文本，但是此文本可以包裝在元素本身中。 這是超級棘手的問題。 我覺得有一種更好的方法來實現您要完成的任務，但這是一種有效的解決方案。

function initialText(s){
  var test  = s.match(/(<.+?>)?.*?<(?!(b|\/|i))/);

  var match = test[0];
  var prefixed_element = test[1];

  // if the string was prefixed with an element tag
  // remove it (ie '<div> blah blah blah')
  if(prefixed_element) match = match.slice(prefixed_element.length);

  // remove the matching < and return the string
  return match.slice(0,-1);
}

您很幸運，我發現這個問題很有趣且具有挑戰性，因為這又是荒謬的。

別客氣 ;-）

Answer 3

嘗試這個：

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