Detect underscore and punch

Question

Is there a way to detect using JavaScript / jQuery if the element is end-to-end and underlined.

So, let's say we have:

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

Is it possible to determine if the text is underlined inside <s>?

* Ideally, it will not be allowed to see if there are any <u>for children <s>.

I did this, and it seems strange that both styles use the same CSS property, which in turn makes me wonder how it works even in the first place.

To make my problem more clear:

I play with the homemade wysiwyg editor, for reasons of ease of use, I am trying to implement a text listener that modifies (lights up) the edit buttons. for example, when part of the text is in bold, the “B” button will go into an active state. I am currently processing this by getting the element in the cursor and checking if the element is bold or inherits it.

The problem with underline and line is that they do not overwrite text-decoration attribute from each other and are not visible in css

, text-decoration underline, - underline line-through. , <u> <s>; , <s> 100 .

, , - .

Answer 1

. @Cheery , , CSS. .

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

, -

, ..

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

Hide result

Answer 3

Somewhat terrible approach, but the only way I could see does not include explicitly checking the nesting, or rely on the default CSS, <s>which remains in any subject (it doesn’t always have text-decoration: line-through;, like <u>not always, it has 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 .

Literature:

• JavaScript:
  • Array.prototype.indexOf().
  • Array.prototype.join().
• JQuery:
  • add().
  • addClass().
  • filter().
  • find().
  • is().