Question

我可能正朝着完全错误的方向前进，所以我想寻求帮助。

背景/概述

我需要显示一段文字，并允许用户从段落中选择一个或多个单词，并将其突出显示的文本保存到数据库中，仅用于他们的个人资料。实际上，文本的帽子选择最终将（1）与高亮区域AND（2）一起存储，链接到另一段中的另一组高亮文本（基本上，我将一个短语从一个源绑定到参考源）

我尝试过的事情......

我试图将段落的每个单词放入DIV（和唯一的ID），每个DIV设置为向左浮动，以便显示看起来没问题。

<style>
div { float: left}
</style>

和...使用示例：

<div id="GEN_1_1">
  <div id="GEN_1_1_1">In</div>
  <div id="GEN_1_1_2">the</div>
  <div id="GEN_1_1_3">beginning</div> 
  <div id="GEN_1_1_4">God</div> 
  <div id="GEN_1_1_5">created</div> 
  <div id="GEN_1_1_6">the</div> 
  <div id="GEN_1_1_7">heaven</div> 
  <div id="GEN_1_1_8">and</div> 
  <div id="GEN_1_1_9">the</div> 
  <div id="GEN_1_1_10">earth</div>.
</div>

这看起来像：一开始上帝创造了天堂和地球。（减去粗体）

到目前为止，我已经使用了

 window.getSelection()

用于确定/抓取已突出显示的单词。

然后我尝试使用它：

if (window.getSelection) 
{ 
  selected_len = window.getSelection().toString().length;

  if (window.getSelection().toString().length>0) 
  { 
    div_id = window.getSelection().getRangeAt(0).commonAncestorContainer.parentNode.id; 
  } 
}

为每个选择的DIV获取ID，但我现在只返回一个DIV ID。

帮助申请：

是否有灵活的方法来获取所选的每个DIV的ID并将其放入一个数组，以便我可以构建一个SQL查询将其放入数据库（查询很容易）？如果不是千言万语，所选单词总计可达数百个，所以我需要确保解决方案能够选择大量单词。

Answer 1

更新： JSFIDDLE DEMO

我再次修改了代码。看看它现在是否适合你。

$(document).ready(function () {
$(document).on('mouseup keyup', '.checked', function () {
    console.log(window.getSelection());
    if (window.getSelection().toString().length>0) {
        var count = window.getSelection();
        var arr = [];
        $('.checked span').each(function(){
            var span  = $(this)[0];
            var isT = window.getSelection().containsNode(span, true);
            if(isT){
                arr.push($(this).attr('id'));
            }
        });
        console.log(arr,count.toString());
        alert(arr);
        alert(count.toString());
       }
    });
});

我为解决方案创造了一个小提琴。请在此处查看：http://jsfiddle.net/lotusgodkk/GCu2D/18/

此外，我使用span代替div进行文字选择。我希望你不会成为一个问题。所以代码可以按你的意愿工作。它将返回选择文本的父span的id。您可以修改它以将ID保存到数组中或根据您的需要。

$(document).ready(function () {
$(document).on('mouseup', '.checked', function () {
    if (window.getSelection) {
        var i = getSelectionParentElement();
        console.log(i);
        alert('parent selected:  ' + i.id);
    }
});
});

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

获取所选/突出显示的DIV的所有ID

1 个答案: