为段落标签内的选定文本插入 HTML 标签

Question

我正在尝试为段落标记中的选定元素添加新元素。 HTML 代码片段如下：

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

所以在上面的代码片段中，我从第二个 P 标签中选择了 "one" 单词，并使用任何事件尝试向所选文本添加元素，以便输出如下所示：

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

那么如何为选定的文本添加这个新创建的 "Strong" 元素？

Answer 1

编辑：删除了 jQuery 依赖项 您可以使用 CSS 实现此目的。首先，您需要用跨度分隔每个单词。然后在事件起源的跨度上添加 class 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>

Answer 2

您可能需要 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 3

你想要这样的东西吗？

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>

来源为 this and this。

此外，这里有一个 pen :)

编辑：代码已更新。所选内容的修改现在应该正确完成了。虽然，我不知道如何处理对已修改元素的第二次修改。（我会很快再次更新。除非，OP 有想法；））

为段落标签内的选定文本插入 HTML 标签

Insert HTML tag for selected text inside paragraph tag

html

javascript

ckeditor