detect underline and strike through

Question

Is there any way to detect with JavaScript/jQuery if an element is strike-through and underlined.

So let's say we have:

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

Is it possible to detect if the text within <s> is also underlined?

*Ideally, it would not be allowed to look if <u> has any <s> children.

I've been toying around with it and it seems peculiar that both styles use the same CSS property, which in turn makes me wonder how it even works in the first place.

To make my problem clearer:

I'm playing around with a self-made wysiwyg editor, for usability reasons I'm trying to implement a listener on the text which alters (lights up) editing buttons. e.g. when a part of text is bold the "B" button changes to an active state. I'm currently handling this by getting the element at the cursor and checking if the element is bold or inherits it.

The problem with underline and striketrough is that they are neither overwriting the text-decoration attribute of each other, and are not visible in css

when I put the cursor on a underlined text-fragment, the text-decoration property only shows as underline, while the text is both underline and line-through. In such situations I cannot know what the exact relation is between the <u> element and the <s> element; the <s> element could be 100 parents back as far as I could know.

A lot of text, but I hope it kinda clears up my situation.

Answer 1

Here is the robust way of doing it. @Cheery answer works well but it fails if italic or underline or any other font-style provided through CSS. Credit is given to Tim Down for his numerous answers for these kind of questions.

 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..

Answer 2

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

what if the combination is or even something like

so what, check inverse too..

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

if the initial string is not a valid html then you do not know how some browsers will behave at its output.

ps: made some simple example, by click..

$(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>