如何创建单词选择器以从文本中选择和突出显示和删除选定的单词？答案

【问题标题】：How to create word selector to select and highlight and remov selected words from text?如何创建单词选择器以从文本中选择和突出显示和删除选定的单词？
【发布时间】：2017-07-18 16:23:48
【问题描述】：

我需要创建一个单词选择器并从中获取结果。例如，您有一些像一个字符串这样的文本，我可能可以用空格将其解析为数组，但我不知道如何创建机制来从单击任何单词后突出显示的文本中选择一些单词，然后是能够获取文本中哪些单词被突出显示的信息。

假设您是用户，并希望在显示带有文本的页面后选择要突出显示的任何单词，并且在单击按钮后，例如系统将从该文本中删除这些单词，这些突出显示的单词。删除突出显示的单词后，用户不需要看到这种变化，但对系统后端很重要。我不能一个一个地删除单词，但我必须选择一些特定的单词，然后按下按钮，系统应该能够进一步处理没有这些单词的文本。此外，再次点击/单击所选单词后，应取消选择该单词。

有没有什么方法、框架（API）或任何我在长时间搜索过程中遗漏的东西？

【问题讨论】：

您可以使用任何编辑器来制作它。我知道ckeditor 和quill，搜索以从任何一个中获取选定的文本内容并制作自己的多个下拉以确认删除或取消选择。
我发现了一些可能会给你一个想法的东西：jsfiddle.net/Lad1dp18/1
好的，谢谢 Niklesh，我会努力创造奇迹的。
谢谢 Krzysztof，很高兴看到一些与 JS 相关的工作。

标签： javascript php html css mysql

【解决方案1】：

最后，我找到了人们可以理解的方法。有些使用文本，解析，为每个可以删除的单词或特殊字符创建跨度，并且感谢 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(){
	// basic interpunct chars should be single elements to click
	textToClear = textToClear.replace(/\./g, ' .');
	textToClear = textToClear.replace(/\?/g, ' ?');
	textToClear = textToClear.replace(/\!/g, ' !');
	textToClear = textToClear.replace(/\,/g, ' ,');
	textToClear = textToClear.replace(/\"/g, ' " ');
	// removing multiple spaces for single
	textToClear = textToClear.replace(/ +(?= )/g,'');
	
	var words = textToClear.split(" ");

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

function removeSelected(){
	$('.clearText').find('*').each(function() {
     	if($(this).css('color') == "rgb(0, 0, 0)"){
			textAfterClear += $(this).html();
		}
    });
	$(".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>

【讨论】：