使用JavaScript切换特定文本无法按预期工作

Question

I have a toggle button that changes a bit of text. The problem I run into is if I have 2 words and I want to change the text of one it changes one but when I toggle it off style is removed from both spans instead of the span of the selected text.

How can I remove the span from the specific text selected and leave the span on the other text?

 function headuppercase(e) { tags('span', 'sC'); } function tags(tag, clas) { var ele = document.createElement(tag); ele.classList.add(clas); wrap(ele); } function wrap(tags) { var el = document.querySelector('span.sC'); sel = window.getSelection(); if (!el) { if (sel.rangeCount && sel.getRangeAt) { range = sel.getRangeAt(0); } document.designMode = "on"; if (range) { sel.removeAllRanges(); sel.addRange(range); } range.surroundContents(tags); } else { var parent = el.parentNode; while (el.firstChild) parent.insertBefore(el.firstChild, el); parent.removeChild(el); } document.designMode = "off"; } 

 .ourbutton { padding: 5px; float: left; font-variant: small-caps; } .container { width: 200px; height: 300px; float: left; } .spanA { width: 100px; height: 80px; max-width: 200px; max-height: 300px; float: left; border: thin blue solid; } .sC { font-variant: small-caps; } 

 <button class="ourbutton" type="button" onclick="headuppercase();">Tt</button> <div class="container"> <span class="spanA" contenteditable="true"></span> </div> 

No jQuery please. Thanks You!

Answer 1

The issue is with this document.querySelector('span.sC') . In all the case it will select the first span with sC which is not good as you have to deal with the current one.

Here is an idea of fix:

 function headuppercase(e) { tags('span', 'sC'); } function tags(tag, clas) { var ele = document.createElement(tag); ele.classList.add(clas); wrap(ele); } function wrap(tags) { sel = window.getSelection(); if (sel.rangeCount && sel.getRangeAt) { range = sel.getRangeAt(0); } document.designMode = "on"; if (range) { sel.removeAllRanges(); sel.addRange(range); } range.surroundContents(tags); if(tags.querySelector('.sC')) { tags.classList.remove('sC'); tags.innerHTML=tags.querySelector('.sC').innerHTML; } document.designMode = "off"; } 

 .ourbutton { padding: 5px; float: left; font-variant: small-caps; } .container { width: 200px; height: 300px; float: left; } .spanA { width: 100px; height: 80px; max-width: 200px; max-height: 300px; float: left; border: thin blue solid; } .sC { font-variant: small-caps; } 

 <button class="ourbutton" type="button" onclick="headuppercase();">Tt</button> <div class="container"> <span class="spanA" contenteditable="true"></span> </div> 

Answer 2

This is not so easily achievable without a library because of all the edge cases you need to handle. I will first touch on some edge cases and then give you an example on how to implement them.

Simple case

Say we have the following string inside a text Node

"Nobody wants too complex code because it becomes unmanageable."

Consider a user who selected the words "Nobody wants" and pressed the toggle small caps button. You should end up with something looking like this (where the bold segments represent text in small-caps):

" Nobody wants too complex code because it becomes unmanageable."

This is an easy case. Just wrap the segment " Nobody wants " inside a <span> and give it the sC class. The same goes for all other segments that are not yet in small caps. Nothing too hard here.

Edge case 1

But say you are in the following state (again, bold segments represent text in small-caps) :

"Nobody wants too complex code because it becomes unmanageable. "

When the user selects and toggles the word "becomes" things become complicated. You have to:

1. Remove the last two words from their containing <span class="sC"> element
2. Add the word "becomes" after the span (from step 1.) and make sure it is not contained in a <span> that has the className sC .
3. Add the word "unmanageable" inside a new <span class="sC"> element after the text Node "becomes" (that was inserted in step 2.)

Edge case 2

Or say you are in the following state (again, bold segments represent text in small-caps) :

" Nobody wants too complex code because it becomes unmanageable. "

What should happen when somebody selects and toggles the segment "wants too complex code because" ? One could say: make every character in this segment

• small-caps : when it is not
• back to normal : when it is currently small-caps

It's easy to see that you will again need a lot of splitting existing span elements , creating new text nodes , and so forth

Edge case N

Say you start with a nested list

• A
  • B
  • C
• D

and a user selects the two last items at once. Then you need to wrap each item separately into a span.

First step towards a solution

While it is not clear in your question how all the edge cases should be handled, here is a first step towards a solution.

 const allCapsClass = 'sC' function toggleCase() { const selection = window.getSelection() if (selection && selection.rangeCount>0) { const spans = wrapInNonNestedSpanners(selection.getRangeAt(0)) for (const span of spans) { const classes = span.classList const action = classes.contains(allCapsClass) ? 'remove' : 'add' classes[action](allCapsClass) } } } const spannerClassName = "non-nested-spanner" const spannerQuerySelector = `.${spannerClassName}` function wrapInNonNestedSpanners(range) { const containingSpanner = getContainingSpanner(range) const result = [] if (containingSpanner != null) { // Edge case 1 const endRange = document.createRange() // contents of the span after range endRange.selectNode(containingSpanner) endRange.setStart(range.endContainer, range.endOffset) const endContents = endRange.cloneContents() const wrappedSelectionContents = containingSpanner.cloneNode(false) wrappedSelectionContents.appendChild(range.cloneContents()) endRange.deleteContents() range.deleteContents() const parent = containingSpanner.parentNode const next = containingSpanner.nextSibling parent.insertBefore(wrappedSelectionContents, next) result.push(wrappedSelectionContents) if (!isEmptySpanner(endContents.childNodes[0])) parent.insertBefore(endContents, next) if (isEmptySpanner(containingSpanner)) parent.removeChild(containingSpanner) const newSelection = document.createRange() newSelection.selectNode(wrappedSelectionContents) window.getSelection().removeAllRanges() window.getSelection().addRange(newSelection) } else { // Edge case 2 const contents = range.extractContents() const spanners = contents.querySelectorAll(spannerQuerySelector) let endRange = document.createRange() // range before the span for (let index = spanners.length-1; index>=0; index--) { const spanner = spanners[index] endRange.selectNodeContents(contents) endRange.setStartAfter(spanner) if (!endRange.collapsed) { const wrappedEndContents = createSpannerWrapping(endRange.extractContents()) range.insertNode(wrappedEndContents) result.unshift(wrappedEndContents) } range.insertNode(spanner) result.unshift(spanner) } const rest = createSpannerWrapping(contents) if (!isEmptySpanner(rest)) { range.insertNode(rest) result.unshift(rest) } } return result } function getContainingSpanner(range) { let cursor = range.commonAncestorContainer if (cursor.classList == undefined) cursor = cursor.parentElement while (cursor.parentElement != null) { if (cursor.classList.contains(spannerClassName)) return cursor cursor = cursor.parentElement } return null } function createSpannerWrapping(childNode) { const spanner = document.createElement('span') spanner.classList.add(spannerClassName) spanner.appendChild(childNode) return spanner } function isEmptySpanner(spanner) { if (spanner.childNodes.length == 0) return true else if (spanner.childNodes.length == 1) { const node = spanner.childNodes[0] return node instanceof Text && node.length == 0 } return false } 

 .sC { font-variant: small-caps; } 

 <section contenteditable> Hello world this is some text </section> <button onclick="toggleCase()">Toggle case</button>