如何创建单词选择器以选择并突出显示并从文本中移除所选单词？

我需要创建一个字选择器并从中获取结果。例如你有一个像一个字符串的一些文字，我大概可以用空格来阵列分析，但我不知道，如何选择从文本中的一些话被点击任何单词后强调创建机制，之后是能够从文本中突出显示哪些单词的信息。如何创建单词选择器以选择并突出显示并从文本中移除所选单词？

想象一下，你是用户，并显示页面的文本选择任何语言来突出后想，然后点击按钮后，例如系统会从这段文字中，这些突出的话删除这些话。删除突出显示的单词后，用户看到此更改并非必要，但对系统后端很重要。我无法逐个删除单词，但我必须选择一些特定的单词，然后按下按钮，系统应该可以在没有这些单词的情况下进一步处理文本。此外，再次轻击/点击选定的单词后，单词应该被分解。

有没有办法，我在我漫长的搜索错过任何方法，框架（API）或什么？

来源

2017-02-27 Marek Bernád

您可以使用任何编辑器进行此操作。我知道'ckeditor'和'quill'，搜索从任何一个获得选定的文本内容，并使自己的多个下拉菜单确认删除或取消选择。 – C2486

我发现的东西，可以给你一个想法：http://jsfiddle.net/Lad1dp18/1/ –

好的，谢谢你Niklesh，我会尝试做一些奇迹这一点。 –

最后，我发现怎么办呢，人能理解它。一些工作与文本，解析，创建跨每个单词或特殊字符可以被删除，并感谢jquery点击单词，突出显示它们，以及多个删除事实，最后我有字符串没有以前选择的单词。我自己做的，好吧，如果你认为我的逻辑方法有些不正确，请给我评论以使我的实现更好，谢谢。

的源代码，wordChooser.html：

// text I will obtained from database 
 
textToClear = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the \"1500s\", when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem    Ipsum."; 
 

 
textAfterClear = "" 
 

 
parseTextToWords(); 
 

 
function parseTextToWords(){ 
 
\t // basic interpunct chars should be single elements to click 
 
\t textToClear = textToClear.replace(/\./g, ' .'); 
 
\t textToClear = textToClear.replace(/\?/g, ' ?'); 
 
\t textToClear = textToClear.replace(/\!/g, ' !'); 
 
\t textToClear = textToClear.replace(/\,/g, ' ,'); 
 
\t textToClear = textToClear.replace(/\"/g, ' " '); 
 
\t // removing multiple spaces for single 
 
\t textToClear = textToClear.replace(/ +(?=)/g,''); 
 
\t 
 
\t var words = textToClear.split(" "); 
 

 
\t // generate words with ids to change their future css 
 
\t for (var i = 0, l = words.length; i < l; i++) { 
 
\t \t var word = $('<span />').attr({'id':'word'+i }).html(" "+words[i]); 
 
\t \t word.css('color','black'); 
 
\t \t $('.clearText').append(word); 
 
\t \t 
 
\t \t $('#word'+i).click(function() { 
 
\t \t \t if($(this).css('color') == "rgb(0, 0, 0)"){ 
 
\t \t \t \t $(this).css('color','red'); 
 
\t \t \t }else{ 
 
\t \t \t \t $(this).css('color','black'); 
 
\t \t \t } \t \t 
 
\t \t }); 
 
\t } 
 
} 
 

 
function removeSelected(){ 
 
\t $('.clearText').find('*').each(function() { 
 
     \t if($(this).css('color') == "rgb(0, 0, 0)"){ 
 
\t \t \t textAfterClear += $(this).html(); 
 
\t \t } 
 
    }); 
 
\t $(".clearText").html(textAfterClear); 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<title>Word chooser</title> 
 
</head> 
 

 
<body> 
 

 
<div class="clearText" style="border: 1px solid darkorange;" > 
 
</div> 
 

 
<div align="center"><button onclick="removeSelected()" type="submit">Delete Choosed</button></div> 
 

 
</body> 
 

 
</html>

来源

2017-02-28 22:46:25

如何创建单词选择器以选择并突出显示并从文本中移除所选单词？

回答

相关问题