如果所选内容在标记内，如何获取格式化文本

How to get formatted text if selection is inside tags

本文关键字：何获取 获取 文本 格式化 如果      更新时间：2023-09-26

如果我选择（用鼠标高亮显示）粗体文本，我希望<b>lt/b>标签（<i>、<span style="color:red">和<sup>等也是如此）。当你开始在所有粗体句子中选择粗体单词时，问题就出现了。从逻辑上讲，如果我选择了粗体文本，我想把粗体文本复制到其他地方。但如果选择不交叉格式标记，我会丢失格式信息。。。下面是工作小提琴的例子：https://jsfiddle.net/xt557ov5/1/

  1. 只在第一行选择单词粗体&按下按钮
  2. 现在选择all第二行，然后按下按钮

如果你想要更多的魔法-只选择单词LINE，从第一个字母到最后一个字母（四个字母周围没有空格）-你也会得到没有任何粗体格式的LINE。

代码段：

$('#extract').on('click', function() {
  extract();
});
function extract() {
  var str = getSelectionHtml();
  str = str.toString().replace(/</g, "&lt;").replace(/>/g, "&gt;");
  console.log(str);
  $('#result').empty().append(str);
}
function getSelectionHtml() {
  var html = "";
  if (typeof window.getSelection != "undefined") {
    var sel = window.getSelection();
    if (sel.rangeCount) {
      var container = document.createElement("div");
      for (var i = 0, len = sel.rangeCount; i < len; ++i) {
        container.appendChild(sel.getRangeAt(i).cloneContents());
      }
      html = container.innerHTML;
    }
  } else if (typeof document.selection != "undefined") {
    if (document.selection.type == "Text") {
      html = document.selection.createRange().htmlText;
    }
  }
  return html;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button type="button" id="extract">Extract</button>
<br>
<br>
<div id="edit">
  <br>
  <b>Select here just word BOLD and press [Extract].</b>
  <br>
  <br>
  <br>Now select all this <b>LINE</b>, and press [Extract].
</div>
<h4>Result:</h4>
<div id="result">
</div>

也许这会有所帮助：stackoverflow：识别网页中所选文本是否为粗体

为了将其应用于您的代码，我构建了以下代码：

...
function selectionIsBold() {
        var range, isBold = 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) {
            isBold = document.queryCommandState("bold");
        }
        if (document.designMode == "on") {
        document.designMode = "off";
        }
        return isBold;
    }
function extract(){
        var str = getSelectionHtml();
        if(selectionIsBold()){
            str= "&lt;b&gt;"+str.toString()+"&lt;/b&gt;";
        }else{
            str = str.toString().replace(/</g, "&lt;").replace(/>/g, "&gt;");   
        }
        $('#result').empty().append(str);
    }
...

注意：当文本为"<strong>"标记时，selectionIsBold也返回true。对于其他文本格式检查（例如<i>），请更改

isBold = document.queryCommandState("bold");

至

isBold = document.queryCommandState("italic");
相关文章：