如果选择在标签内,如何获取格式化文本

时间:2016-05-07 11:38:00

标签: javascript jquery html formatting selection

如果我选择(用鼠标突出显示)粗体文字,我想要< b>< / b>它周围的标签(同样适用于< i>,< span style =“color:red”>,< sup>等...)。 当您开始在全粗体句子中选择粗体单词时,会出现问题。从逻辑上讲,如果我选择粗体文本 - 我想将粗体文本复制到其他地方。但如果选择不跨越格式化标签我松散格式信息... 这是一个小小的例子:https://jsfiddle.net/xt557ov5/1/

  1. 在第一行选择字BOLD&按下按钮。
  2. 现在选择所有第二行,然后按一个按钮。
  3. 如果你想要更多魔法 - 只选择单词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>

1 个答案:

答案 0 :(得分:1)

也许这会有所帮助:stackoverflow: Identify wether the selected text in a web page is bold or not

为了将它应用于您的代码,我构建了这个:

...

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);
    }
...

注意:当thr文本为“&lt; strong&gt;” - 标记时,selectionIsBold也返回true。对于其他文本形成检查(例如&lt; i&gt;)改变

isBold = document.queryCommandState("bold");

isBold = document.queryCommandState("italic");