Question

我想在单击空格时拆分句子。他必须将句子分为两部分。我希望我再单击一次空格，然后将句子的3个部分组成。

我试图在google，stackoverflow等上进行搜索。但是我没有看到我的答案。

这是我的代码。

$(function() {
  $(document).data("text", $("#editor").text())
      .on("mousedown", function() {
          $("#editor")
              .html($(this)
                  .data("text"))
      })
      .on("mouseup", function() {
          that = $("#editor");
          var sel = window.getSelection ? window.getSelection() : document.selection();
          var o = that.text();
          var before = sel.baseOffset;
          var after = o.length - before;
          var a = o.slice(0, before);
          var b = after === 0 ? "" : o.slice(-after);
          var n = "<data>||</data>";
          var html = (after === "" ? a + n : a + n + b);
          that.html(html);
      });
})

#editor {
  font-family: Sans;
  font-size: 28px;
  letter-spacing: 8px;
  white-space: pre;
}
#editor > data {
  color: red;
  max-width: .1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editor">Hello! I am a Text!</div>

所以我希望我有这样的句子：您好，这是一个测试。然后在“ is”和“ a”之间单击：您好，这是
测试。

Answer 1

$(function() {
  jQuery.fn.reverse = [].reverse;
  
  // Add element around all characters
  var text = $("#editor").text();
  var newText = "";
  for (var i = 0; i < text.length; i++) {
    newText += `<span>${text[i]}</span>`;
  }
  $("#editor").html(newText);
  
  // If you click on a space
  $("#editor").on("click", "span", function() {
    if ($(this).text() == " ") {
      var before = $(this).prevAll().reverse();
      var after = $(this).nextAll()
      $("#editor").html("");
      
      before.each(function() {
        if (!$(this).hasClass("white")) {
          $("#editor").append(`<span class="yellow">${$(this).text()}</span>`);  
        } else {
          $("#editor").append(`<span class="white">${$(this).text()}</span>`);
        }
      });
      
      $("#editor").append(`<span class="white"> </span>`);
      
      after.each(function() {
        if (!$(this).hasClass("white")) {
          $("#editor").append(`<span class="yellow">${$(this).text()}</span>`);
        } else {
          $("#editor").append(`<span class="white">${$(this).text()}</span>`);
        }
       });
    }
  });
})

#editor {
  font-family: Sans;
  font-size: 28px;
  letter-spacing: 8px;
  white-space: pre;
}
#editor .br {
  color: red;
  max-width: .1em;
}

#editor .yellow {
  background-color: yellow;
}

#editor .white {
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editor">Hello! I am a Text</div>

---下面的旧答案

这应该是一个好的开始。您可以使用变量before和after做任何您想做的事-这样就适合您的情况。

$(function() {
  jQuery.fn.reverse = [].reverse;
  
  // Add element around all characters
  var text = $("#editor").text();
  var newText = "";
  for (var i = 0; i < text.length; i++) {
    newText += `<span>${text[i]}</span>`;
  }
  $("#editor").html(newText);
  
  // If you click on a space
  $("#editor").on("click", "span", function() {
    if ($(this).text() == " ") {
      var before = $(this).prevAll().reverse();
      var after = $(this).nextAll()
      $("#editor").html("");
      
      before.each(function() {
        $("#editor").append(`<span>${$(this).text()}</span>`);
      });
      
      $("#editor").append(`<span class="br">|</span>`);
      
      after.each(function() {
        $("#editor").append(`<span>${$(this).text()}</span>`);
      });
    }
  });
})

#editor {
  font-family: Sans;
  font-size: 28px;
  letter-spacing: 8px;
  white-space: pre;
}
#editor .br {
  color: red;
  max-width: .1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editor">Hello! I am a Text</div>

如何通过单击空格来分隔句子

1 个答案: