檢測下劃線並通過

有沒有什麼方法可以用JavaScript/jQuery檢測元素是否穿透和下劃線。檢測下劃線並通過

所以我們可以說，我們有：

<u><s>text here.</s>other text here.</u>

是否可以檢測是否內<s>文本還強調？

*理想情況下，如果<u>有任何<s>孩子，將不會被允許看。

我一直在玩弄它，它似乎有點奇怪，兩種風格使用相同的CSS屬性，這反過來讓我想知道它如何工作在第一位。

爲了讓我更清楚的問題：

我玩弄一個自制的所見即所得的編輯器，對於可用性的原因，我想實現上改變（點亮）的編輯按鈕上的文本的監聽器。例如當文本的一部分變爲粗體時，「B」按鈕變爲激活狀態。我目前正在通過獲取光標處的元素並檢查元素是粗體還是繼承它來處理這個問題。

用下劃線和striketrough的問題是，它們並沒有被覆蓋彼此的文字修飾屬性，而不是CSS

可見，當我把光標放在一個帶下劃線的文本片段中，text-decoration財產只顯示爲underline，而文字爲underline和line-through。在這種情況下，我無法知道<u>元素和<s>元素之間的確切關係;據我所知，<s>元素可以返回100個父母。

很多文字，但我希望它有點清除我的情況。

來源

2014-10-19 Rebirth

您可以在任何無形的元素插入和檢查'$（「美」）。length'它 – Cheery 2014-10-19 22:37:18

如果組合是什麼''，甚至像'

'（只是爲了覆蓋我的基地）。 – Rebirth 2014-10-19 22:39:25

@重生檢查我的答案。即使通過CSS提供樣式，它也可以工作。 – redV 2014-10-19 23:00:11

這裏是做它的可靠的方法。 @Cheery答案效果很好，但如果使用斜體或下劃線或通過CSS提供的任何其他字體樣式，則會失敗。信貸給了Tim Down對於這些問題的衆多答案。

function checkState(element, check) { 
    var doc = document; 
    var text = doc.getElementById(element); 

    if (doc.body.createTextRange) { // ms 
     var range = doc.body.createTextRange(); 
     range.moveToElementText(text); 
     range.select(); 
    } else if (window.getSelection) { // moz, opera, webkit 
     var selection = window.getSelection(); 
     var range = doc.createRange(); 
     range.selectNodeContents(text); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 

    var range, checked = false; 
    if (window.getSelection) { 
     var sel = window.getSelection(); 
     if (sel && sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      document.designMode = "on"; 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } 
    } 
    if (document.queryCommandState) { 
     checked = document.queryCommandState(check); 
    } 
    if (document.designMode == "on") { 
     document.designMode = "off"; 
    } 
    if (window.getSelection) { 
     if (window.getSelection().empty) { // Chrome 
      window.getSelection().empty(); 
     } else if (window.getSelection().removeAllRanges) { // Firefox 
      window.getSelection().removeAllRanges(); 
     } 
    } else if (document.selection) { // IE? 
     document.selection.empty(); 
    } 
    return checked; 
} 

alert(checkState('c', 'underline')); // italic, bold etc..

來源

2014-10-19 22:58:46 redV

我從Tim Down看到很多，他所做的是超越真棒，目前看這是否適合我。 – Rebirth 2014-10-19 23:18:14

它檢查出，由於使用了execCommand，瀏覽器似乎保存了這些命令並且確實記住了一個元素是否通過和/或加下劃線。謝謝紅色（和間接添Tim Down） – Rebirth 2014-10-19 23:23:20

var str = '<u><s>text here.</s>other text here.</u>'; 
var el = $('<div>').html(str); 
alert($('u s', el).length);

如果什麼組合是，甚至像

等什麼，檢查逆太..

var str = '<s><div><u></u></div><p><u></u></p></s>'; 
var el = $('<div>').html(str); 
alert($('u s', el).length || $('s u', el).length);

如果初始字符串那麼這不是一個有效的html您不知道某些瀏覽器在其輸出中的表現如何。

PS：做了一些簡單的例子，通過點擊..

$(function(){ 
 
    $('.wrapper').on('click', '*', function() { 
 
    var styles = ['line-through', 'underline'], counter = [0, 0], tags = ['S', 'U']; 
 
    $(this).parentsUntil('.wrapper').andSelf().each(function() { 
 
    var current = $(this).css('text-decoration'), $tag = $(this)[0]; 
 
    $.each(styles, function(index, style) { 
 
     if (current.indexOf(style) > -1 || $tag.tagName == tags[index]) counter[index] += 1; 
 
    }); 
 
    }); 
 
    var results = []; 
 
    if (counter[0] > 0) results.push('striked'); 
 
    if (counter[1] > 0) results.push('underlined'); 
 
    alert(results.join(' and ')); 
 
    return false; 
 
}); 
 
});

.strike { 
 
    text-decoration: line-through; 
 
} 
 

 
.underline { 
 
    text-decoration: underline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class='wrapper'> 
 
<div class='strike'> 
 
    striked <u>underlined</u> 
 
</div> 
 

 
<div class='underline'> 
 
    underlined <s>striked</s> 
 
</div> 
 
</div>

來源

2014-10-19 22:38:46 Cheery

@Rebirth然後用例子更詳細地解釋。 – Cheery 2014-10-19 22:52:54

@Cheery如果樣式是通過CSS提供的，那麼您的答案將不起作用，請檢查我的答案。 – redV 2014-10-19 22:59:31

@redV他只給了字符串，他從未說過他將如何以及在哪裏使用它。 – Cheery 2014-10-19 23:01:42

一個有點可怕的做法，但我看得出來，不涉及明確檢查築巢，或依賴於默認的CSS倖存的任何主題化（<s>不會永遠，必須，text-decoration: line-through;，同樣<u>的唯一途徑不會總是，不一定，有text-decoration: underline;）：

// the text-decoration styles you want to find: 
var styles = ['line-through', 'underline']; 

// finding all elements within the <body>, and 
// filtering them: 
var underlinedAndLineThrough = $('body *').filter(function() { 
    // caching because of re-use: 
    var self = $(this), 
     decor = self.css('text-decoration'); 

    // if the 'text-decoration' style is found in the array of styles we're 
    // looking for: 
    if (styles.indexOf(decor) > -1) { 
     // we add that style as a class-name to the current element, and all 
     // descendants: 
     self.find('*').add(self).addClass(decor); 
     // we return the current element (to keep it in the collection): 
     return self; 
    } 
// filtering again: 
}).filter(function(){ 
    // we keep the current element of the collection if it has all the css styles 
    // we're looking for: 
    return $(this).is('.' + styles.join('.')); 
}); 

console.log(underlinedAndLineThrough);

JS Fiddle demo。

參考文獻：

的JavaScript：
- Array.prototype.indexOf()。
- Array.prototype.join()。
的jQuery：
- add()。
- addClass()。
- filter()。
- find()。
- is()。

來源

2014-10-19 23:01:32

檢測下劃線並通過

回答

相關問題