javascript：选择段落中的句子_Javascript_Jquery_Frontend_Text Segmentation

javascript：选择段落中的句子

javascript jquery

javascript：选择段落中的句子,javascript,jquery,frontend,text-segmentation,Javascript,Jquery,Frontend,Text Segmentation,我想创建一个文本注释工具。假设我们有一些文本，如下图所示，客观效果是：用户点击文本中的某个地方后，整个句子会被自动选中并突出显示我不知道如何达到这种效果。有人能告诉我可以解决这个问题的代码或资源吗谢谢伪代码（实际上可能有效）：并将该类分配给所有p标记伪代码（可能实际工作）：并将该类分配给所有p标记如果每个句子都有一个公共类（比如“chat-sense”），我们可以通过 $('.chat-sentence').click(function() { $(this).select(

我想创建一个文本注释工具。假设我们有一些文本，如下图所示，客观效果是：用户点击文本中的某个地方后，整个句子会被自动选中并突出显示

我不知道如何达到这种效果。有人能告诉我可以解决这个问题的代码或资源吗

谢谢

伪代码（实际上可能有效）：

并将该类分配给所有p标记

伪代码（可能实际工作）：

并将该类分配给所有p标记

如果每个句子都有一个公共类（比如“chat-sense”），我们可以通过

$('.chat-sentence').click(function() {
    $(this).select(); 
});

如果每个句子都有一个公共类（比如“chat句子”），我们可以通过

$('.chat-sentence').click(function() {
    $(this).select(); 
});

提供了一个适用于所有浏览器的通用fn，如下所示：

一次切换一个句子，隐藏先前切换的句子的突出显示

<div class="paragraph">
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdaflasdkfjasdlfjsdafasd Yah Nah. </p>
    <p class="sentence">Blasdfasdah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflslajfdladajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasadsfasdd Yah, NadfasdfasdfaAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasd Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,YaZAHah NAh Nah. </p>
</div>
<script type="text/javascript">
$(function(){
    $('.sentence').click(function(){
        $('.highlight').toggleClass('highlight');
        $(this).toggleClass('highlight');
    });
});
</script>
<style type="text/css">
<!--
.paragraph { width: 95%; padding: 5px; margin: 5px; background: #fff;}
.sentence { width: 100%; display: inline;}
.highlight{ background-color: #FC9A24}
-->
</style>

<script>
  $(function() { 
    $('.sentence').click(function() {
      $(this).toggleClass('sentenceStyle');
    });
  });
</script>


诸如此类，是啊，是啊
布拉斯达斯达是的，是的，是的，不是的
诸如此类，是啊，是啊，不是啊
诸如此类，是的，是的，是的，不是的
诸如此类
诸如此类，诸如此类
诸如此类
诸如此类
$（函数（）{
$（'.句子'）。单击（函数（）{
$（'.highlight'）.toggleClass（'highlight'）；
$（this.toggleClass（'highlight'）；
});
});

给你：

一次切换一个句子，隐藏先前切换的句子的突出显示

<div class="paragraph">
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdaflasdkfjasdlfjsdafasd Yah Nah. </p>
    <p class="sentence">Blasdfasdah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflslajfdladajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasadsfasdd Yah, NadfasdfasdfaAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasd Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,YaZAHah NAh Nah. </p>
</div>
<script type="text/javascript">
$(function(){
    $('.sentence').click(function(){
        $('.highlight').toggleClass('highlight');
        $(this).toggleClass('highlight');
    });
});
</script>
<style type="text/css">
<!--
.paragraph { width: 95%; padding: 5px; margin: 5px; background: #fff;}
.sentence { width: 100%; display: inline;}
.highlight{ background-color: #FC9A24}
-->
</style>

<script>
  $(function() { 
    $('.sentence').click(function() {
      $(this).toggleClass('sentenceStyle');
    });
  });
</script>


诸如此类，是啊，是啊
布拉斯达斯达是的，是的，是的，不是的
诸如此类，是啊，是啊，不是啊
诸如此类，是的，是的，是的，不是的
诸如此类
诸如此类，诸如此类
诸如此类
诸如此类
$（函数（）{
$（'.句子'）。单击（函数（）{
$（'.highlight'）.toggleClass（'highlight'）；
$（this.toggleClass（'highlight'）；
});
});

我很确定您对这方面是新手，因此我将解释一些细节：

在一分钟或更短的时间内开始起床和跑步：

将其插入HTML（最常见的是在头部，但也可以将其放在end body标记之前）：

然后在jQuery元素之后放置一个脚本元素。它将切换你的句子风格

<div class="paragraph">
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdaflasdkfjasdlfjsdafasd Yah Nah. </p>
    <p class="sentence">Blasdfasdah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflslajfdladajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasadsfasdd Yah, NadfasdfasdfaAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasd Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,Yah Yahasdlfjsdkaflasdkfjasdlfjsdafasd Yah, Nah NAh Nah. </p>
    <p class="sentence">Blah bdsfaflsdajflasdfslah blah,YaZAHah NAh Nah. </p>
</div>
<script type="text/javascript">
$(function(){
    $('.sentence').click(function(){
        $('.highlight').toggleClass('highlight');
        $(this).toggleClass('highlight');
    });
});
</script>
<style type="text/css">
<!--
.paragraph { width: 95%; padding: 5px; margin: 5px; background: #fff;}
.sentence { width: 100%; display: inline;}
.highlight{ background-color: #FC9A24}
-->
</style>

<script>
  $(function() { 
    $('.sentence').click(function() {
      $(this).toggleClass('sentenceStyle');
    });
  });
</script>


$（函数（）{
$（'.句子'）。单击（函数（）{
$（this.toggleClass（'sentenceStyle'）；
});
});

现在需要应用样式（）

在标记后放置样式元素：

<style>
  .sentenceStyle {
    background-color: red;
    color: white;
    font-size: 14px;
}
</style>


.句子风格{
背景色：红色；
颜色：白色；
字体大小：14px；
}

现在你准备好出发了！以下是您可能会感到困惑的情况。