Вставить тег HTML для выделенного текста внутри тега абзаца

Question

Я пытаюсь добавить новый элемент для выбранного элемента в теге абзаца. Фрагмент кода HTML, как показано ниже:

 <div class="parent-bodytext">
     <p>Hello</p>
     <p>This one is</p>
     <p>Sample Text</p>
 </div>

Итак, в приведенном выше фрагменте я выбрал «одно» слово из второго тега P и, используя любое событие, пытаюсь добавить элемент к этому выделенному тексту, чтобы вывод был таким, как показано ниже:

 <div class="parent-bodytext">
     <p>Hello</p>
     <p>This <strong>one</strong> is</p>
     <p>Sample Text</p>
 </div>

Итак, как добавить этот вновь созданный элемент "Сильный" для выделенного выделенного текста?

Answer 1

Вы можете использовать window.getSelection для этой цели

const wrapper = document.getElementsByClassName('parent-bodytext')[0];

wrapper.addEventListener('mouseout', event => {
   const selection = window.getSelection();
   if (selection.rangeCount) {
       const replacement = document.createElement('strong');
       replacement.textContent = selection.toString();
       const range = selection.getRangeAt(0);
       range.deleteContents();
       range.insertNode(replacement);
   }
});

 <div class="parent-bodytext">
 <p>Hello</p>
 <p>This one is</p>
 <p>Sample Text</p>
 </div>

Answer 2

Вы хотели что-то подобное?

window.onload = () => {
  function getSelectionParentElement() {
    var parentEl = null,
      sel;
    if (window.getSelection) {
      sel = window.getSelection();
      if (sel.rangeCount) {
        parentEl = sel.getRangeAt(0).commonAncestorContainer;
        if (parentEl.nodeType != 1) {
          parentEl = parentEl.parentNode;
        }
      }
    } else if ((sel = document.selection) && sel.type != "Control") {
      parentEl = sel.createRange().parentElement();
    }
    return parentEl;
  }

  function getSelectedText() {
    var text = "";
    if (typeof window.getSelection != "undefined") {
      text = window.getSelection().toString();
    } else if (
      typeof document.selection != "undefined" &&
      document.selection.type == "Text"
    ) {
      text = document.selection.createRange().text;
    }
    return text;
  }
  
  const makeBold = (selectStart, selectEnd, length, text)=>{
    let replacedText = `<strong>${text.substr(selectStart, length)}</strong>`;
    let textHalfA = text.substr(0, selectStart);
    let textHalfB = text.substr(selectEnd, text.length - 1);
    return textHalfA + replacedText + textHalfB;
  };
  
  function handleMouseUp() {
    // the selected text
    const text = getSelectedText();
    // the length of the selected content
    const selectedTextLength = text.length;
    // the parent of the selected content
    let parent = getSelectionParentElement();
    // the entire content of the parent
    let parentText = parent.innerHTML;
    // where the user's selection starts
    let selectStart = window.getSelection().getRangeAt(0).startOffset;
    // where the user's selection ends
    let selectEnd = window.getSelection().getRangeAt(0).endOffset;
    if (parent) {
      parent.innerHTML = makeBold(selectStart, selectEnd, selectedTextLength, parentText);
    }
  }

  document.onmouseup = handleMouseUp;
  document.onkeyup = handleMouseUp;
};

<p>I am a sentence.</p>

Источники будут это и это .

Кроме того, вот ручка :)

---

Изменить: код обновлен. Модификация выбранного контента должна быть сделана правильно сейчас. Хотя я понятия не имею, что делать со второй модификацией уже измененного элемента. (Скоро обновлю. Если у OP нет идеи;))

Answer 3

РЕДАКТИРОВАТЬ: Удалена зависимость JQuery Вы можете добиться этого с помощью CSS. Во-первых, вам нужно отделить каждое слово от интервала. Затем добавьте класс strong в промежуток, из которого произошло событие

window.onload = function () {
  document.getElementsByClassName("parent-bodytext")[0].onclick = function(e) {
    var tgt = e.target;
    if (tgt && tgt.nodeName === 'SPAN') {
      tgt.classList.add('strong');
    }
  };
};

.strong{
  font-weight: bold;
}

<div class="parent-bodytext">
     <p><span>Hello</span></p>
     <p><span>This</span> <span>one</span> <span>is</span></p>
     <p><span>Sample</span> <span>Text</span></p>
 </div>