How to toggle the case of individual words in sentences displayed in HTML form input boxes by double-CodePudding

Double clicking a word in a sentence in an HTML form input box will highlight that word. I want each double click to toggle the case of the highlighted word between lower and upper case.

    <input id="vnib" type="text" value="#ATitle#">

Example: the title showing in the input box is "The longest Day". When I double click on the word "longest" it will change to "Longest".

Why this? I need to correct hundreds of capitalization errors in a list of 30,000 titles and want to save hundreds of key presses. Right now I have to select the initial letters of each incorrectly capitalized word and then type in the letters with the correct case.

CodePudding user response：

Here is a simple HTML pure JS solution.

let content = document.getElementById("content");
content.addEventListener("dblclick", changeSelectionCase);
function changeSelectionCase(e) {
  let selection = window.getSelection();
  if (selection && selection.rangeCount > 0) {
    let selectionRange = selection.getRangeAt(0);
    let startOffset = selectionRange.startOffset
    content.textContent = content.textContent.substring(0, startOffset)  
                          content.textContent[startOffset].toUpperCase()  
                          content.textContent.substring(startOffset   1);
  }
}

<p id="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora nostrum optio suscipit cumque adipisci molestias inventore officia ea corrupti dolore alias nemo iure, beatae porro soluta quo aliquam ut facere.</p>

@Commata, per your comments, made it easier. Just save the below code as an HTML file and open it up with your browser. It contains an editable paragraph, so you can copy/paste your text on it. Then double click on the words you want to toggle the case of the first letter.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        p:before {
            content: "(Paste content here)";
            font-weight: bold;
            margin-right: 1rem;
        }
        p {
            margin: 2rem;
            padding: 2rem;
        }
    </style>
</head>

<body>
    <p contenteditable="true" id="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora nostrum
        optio suscipit cumque adipisci molestias inventore officia ea corrupti dolore alias nemo iure, beatae porro
        soluta quo aliquam ut facere.</p>
</body>
<script>
    let content = document.getElementById("content");
    content.addEventListener("dblclick", changeSelectionCase);
    function changeSelectionCase(e) {
        let selection = window.getSelection();
        if (selection && selection.rangeCount > 0) {
            let selectionRange = selection.getRangeAt(0);
            let startOffset = selectionRange.startOffset;
            let upperCase = content.textContent[startOffset].toUpperCase();
            let toggledCase = upperCase === content.textContent[startOffset]
                ? content.textContent[startOffset].toLowerCase()
                : content.textContent[startOffset].toUpperCase();
            content.textContent = content.textContent.substring(0, startOffset)  
                toggledCase  
                content.textContent.substring(startOffset   1);
        }
    }
</script>

</html>