Jquery-从文本中选择单个单词

Question

如何使用Jquery选择单词并将其保存到DB中。即，说我的页面中有以下内容，

"<p>This is a beautiful sentence </p>"

如果我点击“漂亮”，我想显示弹出选项“添加”。如果我点击“添加”，单词“beautiful”将保存在我现有的单词数据库中。如果我再次点击它不会被保存，数据库包含唯一的单词。

我在Django工作。

编辑：我尝试了以下内容：

<script>
$(document).ready(function(){
  $("p").click(function(){
    var value = $(this).text();
    var input = $('#my_input');
    input.val(value);
  });            
});    
</script>

Answer 1

例：

$(function() {
  $("p.allow-click span").click(function() {
    var value = $(this).text();
    var input = $('#my-input');
    input.val(value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click"><span>This</span> is a <span>beautiful</span> <span>sentence</span>.</p>
<input id="my-input" type="text" />

如您所见，这允许每个特定单词具有单击事件。您几乎可以使用任何标签，但<span>在某种意义上是最不具侵略性的。您可以使用<b>，<i>或其他一些HTML标记。这些可能会改变<span>不会的文本的类型面或外观。

更新

如果你不想手动编辑HTML，但是在jQuery中完成所有操作，你可以这样：

$(function() {
  function applyClick($t) {
    var inner = $t.text().trim();
    var trail = false;
    if (inner.slice(-1) == ".") {
      trail = true;
      inner = inner.slice(0, -1);
    }
    var parts = inner.split(" ");
    $.each(parts, function(k, v) {
      parts[k] = "<span>" + v + "</span>";
    });
    var myInner = parts.join(" ");
    if (trail) {
      myInner = myInner + ".";
    }
    $t.html(myInner);
    $t.find("span").click(function() {
      var value = $(this).text();
      var input = $('#my-input');
      input.val(value);
    });
  }
  applyClick($(".allow-click"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click">This is a beautiful sentence.</p>
<input id="my-input" type="text" />

希望有所帮助。