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

Question

如何使用 Jquery 选择一个单词并将其保存到数据库中。 IE， 假设我的页面中有以下内容，

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

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

我在 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" />

希望对您有所帮助。